How many ways would you write CSS vertically centered?

CSS control center is a very common layout skill in front-end development. This article lists several ways to control the centering of CSS elements.

When it comes to centering HTML elements, it refers to horizontal and vertical centering, as well as horizontal and vertical centering.

Because HTML document flow is horizontal, layout control is much easier in the horizontal direction than in the vertical direction, as is center.

Still, there are more ways to write vertical center than can be counted on one hand. Here are a few and a brief comparison.

One, horizontal center

Using CSS to control horizontal center is simple:

• The block-level element sets width and margin Auto
• The inline element parent element is set to text-align center

The HTML code is as follows:

1. Block level elements are horizontally centered

.container {  
    height: 300px;  
    width: 300px;  
    border: 1px solid red;
}
.content {  
    width: 10rem;  
    border: 1px solid green;  
    margin: 0 auto;
}
Copy the code

Effect:

2. Inline elements are horizontally centered

.container {  
    height: 300px;  
    width: 300px;  
    border: 1px solid red;  
    text-align: center;
}
.content {  
    display: inline-block;  
    border: 1px solid green;
}
Copy the code

Effect:

The code is simple and there are no compatibility issues, so there is usually no need for other complicated ways to achieve horizontal centering.

Two, horizontal and vertical center

Using CSS to control vertical center (or horizontal vertical center) is not as convenient as controlling vertical center.

1. Flex layout

Once the Flex layout appears, it’s convenient to center it vertically, setting the parent element directly:

display: flexalign-items: center
Copy the code

Webkit is required for flex properties in IE10+. Webkit is required for flex properties in IE10+

.container { width: 300px; height: 300px; border: 1px solid red; display: -webkit-flex; display: flex; // Key attribute align-items: center; // justify-content: center}. Content {border: 1px solid green; }Copy the code

Effect:

2. Margin + position: Absolute layout

Position: Absolute Layout elements. You can set the top/bottom and left/right attributes to make the elements self-adaptive in the vertical and horizontal directions respectively. Just like div in horizontal by default!

For the horizontal center of block-level elements above, we set the width and then coordinate with margin to achieve horizontal center. For absolute positioning elements with top/bottom and left/right set, we set the width and height together with margin to achieve horizontal and vertical center:

.container {  
    width: 300px;  
    height: 300px;  
    position: relative;  
    border: 1px solid red;
}
.content {  
    position: absolute;  
    left: 0;  
   right: 0;  
   top: 0;  
   bottom: 0;  
   width: 200px;  
   height: 100px;  
   margin: auto;  
   border: 1px solid green;
}
Copy the code

Effect:

Compatibility is very good, IE8 support above.

Transform + Absolute

Absolute The left and top attributes of the location element position the left and top boundaries of the child element relative to the parent element. Transform is a very powerful property in CSS3. It can receive multiple property values, including rotation, scaling, translation and many other functions.

Transform is used to move the center point of the child element to the center point of the parent element.

.container {  
    width: 300px;  
    height: 300px;  
    position: relative;  
    border: 1px solid red;
}
.content {  
    position: absolute;  
    left: 50%;  
   top: 50%;  
   transform: translate(-50%, -50%);  
   border: 1px solid green;
}
Copy the code

Effect:

One minor drawback of this method is that the final value of the translate parameter cannot be a decimal, otherwise some browsers will render it blurry, so it is best to set the width and height to even.

4. Absolute +margin

Similar to the previous method, which uses a transform to shift the element to the left and up, this method uses a margin negative to pull the element to the upper left corner.

Code:

.container {  
    width: 300px;  
    height: 300px;  
    position: relative;  
    border: 1px solid red;
}
.content {  
    position: absolute;  
    left: 50%;  
   top: 50%;  
   width: 200px;  
   height: 100px;  
   margin-top: -50px;  
   margin-left: -100px;  
   border: 1px solid green;
}
Copy the code

Effect:

5. Absolute + calc

From the above two methods, absolute sets left and top and then moves the element back by translation or margin. If we could calculate the correct left and top values directly, wouldn’t it be all at once? The calc function does this, but of course we need to know the width and height of the child elements:

.container {  
    width: 300px;  
    height: 300px;  
    border: 1px solid red;  
    text-align: center;  
    position: relative;
}
.content {  
    position: absolute;  
   border: 1px solid green;  
   width: 200px;  
   height: 100px;  
   left: calc(50% - 100px);  
   top: calc(50% - 50px);
}
Copy the code

Effect:

6、 line-height + vertical-align

Vertical-align is an attribute that applies to inline elements. Inline elements have the property of being displayed on the same line as other inline elements or text, but are “baseline aligned” with the parent element by default.

Here, the baseline refers to a vertical position in each line of the parent element, which is the level of the lower edge of the English X. By setting vertical-align to middle, the middle of the inline element can be aligned with the middle of the parent element (baseline + half the height of the letter X).

So you can take advantage of this by setting the row height of the parent element to its own height, and then vertically centering the child element by aligning it with the parent element’s center line.

Code:

.container { width: 300px; height: 300px; border: 1px solid red; line-height: 300px; text-align: center; } .content { display: inline-block; The line - height: 1.5; border: 1px solid green; vertical-align: middle; }Copy the code

Effect:

The above methods have different applicable conditions, so they also have different advantages and disadvantages. The following table compares various methods: