An analysis of CSS horizontal centering

Horizontal centering is one of several common layout methods. It is mainly divided into the center of the inner Element and the center of the block element. The center of the Block element is also divided into a fixed-width center, indeterminate width. The center of the inline element, which can be implemented using Text-align:center, is centered on the block element of the known width, using absolute positioning and setting

Margin is a negative value that is half the width and can be achieved. However, the center of the indefinite width is more common than the above two, but also more complex, we often need to page page number display and other places to use the indefinite width of the center, the use of more convenient, below to study the common types of block elements of the horizontal center.

1. Label nesting offset

Implementation principle:

Associative to the center of the fixed width of the implementation: first offset to the center of the screen, set its margin direction offset half of the width. So can you think of a way to borrow this idea, first offset 50% to the right half of the screen, and then offset back in the opposite direction? The difficult point of implementation is not knowing how much this width is. Also think that as long as the parent width and the child width equal, and then use a percentage to solve. So how do you make the parent width the same as the word width? The enveloping nature of float: If the parent element floats, and does not set the width height, the child element will be wrapped as much as possible.

Implementation code:

<! DOCTYPE html>

Implementation results:


Advantages and Disadvantages:

The disadvantage is obvious, you need to write and document content independent of the label, more dozen lines of code compatibility Good, in ie6+ browser view no problem



2.flex-box layout



Implementation principle:



Define a Flex container, and then set its content alignment to align to the middle

<! DOCTYPE html>

Implementation results:




Pros and Cons Analysis:

The easiest to implement, but because Flex is not compatible, use it sparingly when you want to be compliant with low-order browsers.



3. Inline layout



Implementation principle:

Text-align:center can let the inline elements be centered horizontally, and if you change the block elements into inline elements, you can use text-align to achieve horizontal centering.

Implementation code:

<! DOCTYPE html>

Implementation results:


Pros and Cons Analysis:

With the original is to modify the text alignment of the text-align to achieve horizontal center total feeling a bit awkward, the outside of the container also first redundant, but in order not to affect the body of other elements of the local, for the moment. In addition the compatibility is good, in ie6+ can display normally.