Front-end cheats, see how programmers use nine moves, fix CSS horizontal center

CSS Horizontal Center Text-align:center is the front-end engineer's basic skills, I often encountered in the project CSS Horizontal Center requirements, this tutorial I used in the past 9 kinds of CSS to achieve horizontal center of the method summed up, but also convenient for later use when the review.

Tools/Materials

Css
Text-align:center

Method/Step

1. through margin:0 Auto; The Text-align:center implements CSS horizontal centering.

This method is to achieve CSS horizontal center is the most commonly used, I in the front-end development of about 60% of the CSS horizontally centered is through the "margin:0 auto;" Text-align:center "is implemented.

?

2. Achieve CSS horizontal centering via Display:flex.

With more and more compatible flexbox, the implementation of CSS horizontal centering through "Display:flex" is becoming increasingly popular.

The principle of CSS horizontal centering through Display:flex is the parent element Display:flex;flex-direction:column, while the child element Align-self:center;

This is the same principle as the vertical center of CSS, except that there are differences on flex-direction, one is row (the default) and the other is column.

?

3. Achieve CSS horizontal centering through Display:table-cell and Margin-left.

For cases where the width of both the parent and child elements is determined, it is appropriate to implement CSS horizontal centering through Display:table-cell and Margin-left.

When used, the parent element Display:table-cell, and the child element gives half the remaining width of the margin-left.

?

4. Achieve CSS horizontal centering via Position:absolute.

This approach is similar to the previous method for scenarios where the width of both parent and child elements is determined.

When used, the parent element Position:absolute, and the child element gives half the remaining width of the margin-left.

As a front-end programmer, having a learning atmosphere is especially important with a communication circle. This is one of my front end learning Communication Group 330336289 (invite code: Silence), want to learn the front end of the communication, intends to learn more about the industry's friends, whether you are small white or Daniel are welcome to join, we exchange learning together.

5. Achieve CSS horizontal centering via width:fit-content.

This method ensures that the CSS is horizontally centered in cases where the child element width is indeterminate.

It should be noted that the need to cooperate with "margin:0 auto; Text-align:center "use.

?

6. Achieve CSS horizontal centering through Display:inline-block and Text-align:center.

Display:inline-block can change the expression style of the child element within the parent element, also need to cooperate with "margin:0 auto;" Text-align:center "use.

7. Achieve CSS horizontal centering through position:relative, Float:left, and Margin-left.

To the parent element style position:relative, to the child element Float:left and Margin-left can realize the CSS horizontal center.

8. The CSS is horizontally centered by hiding the node +float method.

We can add a hidden node and then make it float:left, this way the element will be pushed horizontally by the hidden node.

This method of adding hidden nodes is also suitable for CSS vertical centering, the same principle, but not float.

9. Achieve CSS horizontal centering via transform.

This approach is the least recommended, because the Transform property behaves in different browsers, so there are some compatibility issues that are recommended only when a known user's browser is available.

?

Precautions

CSS horizontally centered 1th, 3, 4 methods of browser compatibility is best, other methods more or less there are some browser compatibility deficiencies

Front-end cheats, see how programmers use nine moves, fix CSS horizontal center