This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

This article is aimed at front-end beginners

During development, we often encounter style problems of one kind or another, and one of the most common is the centering of elements. Therefore, this article will focus on to tell you, in the end how to make our “disobedient elements”, obediently center

Before dealing with center, we need to understand two concepts:

  • Inline elements
  • Block-level elements

Let’s start with the definition:

Inline elements: You cannot set width and height. You can share a line with other elements

Inline element: Exclusive row, width and height can be set

With this in mind, we can determine whether you want the middle element to be a line element or an accounting element

Let’s look at the solution

1. Inline elements

1, horizontal center of inline elements: use attribute text-align: center for parent elements

2. Vertical centering of inline elements: give the parent element the attribute line-hight: the height of the parent element box

Block-level elements

Horizontal center of block-level elements: use the attribute margin: 0 auto for child elements

2. There are four ways to center horizontal and vertical elements in a row:

Before introduction, write our HTML structure, the specific code is as follows:

<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
Copy the code

The CSS style is as follows:

A, set the parent element to relative position and set the top, right, left, and bottom of the child element to 0px, and remember to set the margin to auto

thenCopy the code
                .outer{
			width: 500px;
			height: 500px;
			background-color: #ddd;
			border: 1px solid red;
			position: relative;
		}
		.inner{
			width: 100px;
			height: 100px;
			margin:auto; /* Don't forget to write */
			position: absolute;
			top: 0px;
			right: 0px;
			bottom: 0px;
			left: 0px;
			background-color: pink;
		}

Copy the code

B, set the absolute position of the parent element and then set the determined position of the child element, and set top to half of the width of the parent element and subtract the width of the child element itself, of course the same as left.

                .outer{
			width: 500px;
			height: 500px;
			background-color: #ddd;
			border: 1px solid red;
			position: absolute;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			top: calc(50% - 50px);
			left: calc(50% - 50px);
		}
Copy the code

C. Set the relative position of the parent element first and then the absolute position of the child element. Set the top and left of the child element to half of the width of the parent element, and set the offset outward to half of the width and height of the child element

                .outer{
			width: 500px;
			height: 500px;
			background-color: #ddd;
			border: 1px solid red;
			position: relative;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
Copy the code

D. Set display to Flex, align-items to center and justify-content to Center. The idea here is to center its child elements on their own axes and intersecting axes. If you don’t understand this, take a look at some of the flex layout features.

                .outer{
			width: 500px;
			height: 500px;
			background-color: #ddd;
			border: 1px solid red;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: pink;
			
		}
Copy the code

Above is the content that I want to say to everybody this time, hope can solve your problem, flexible use can, I personally use more scenes in the work is the last kind of oh

Front-end rookie a, I hope you criticize and correct, of course, also look forward to you to supplement oh ~