Several ways to center div in HTML

In the development process, many requirements need us to center a Div, such as the HTML document flow of a div, such as the pop-up layer content part of this out of the flow of documents. Different situations have different centering methods, then share the next several common centers.

1.text-align:center.

Code:

<div class= "center" > <span class= "center_text" >123 </span></div>

. Center { text-align:center;} Center_text { display:inline-block; width:500px}

This way you can horizontally center the inline elements in a block-level element, such as Inline,inline-block;

But if you are using a block-level element in a block-level element, such as a div in a div, this method will fail once the inner div has its own width. Only the text inside the div can be centered, and the div is still left aligned.

In another case, when the inner element is out of the flow of the document, Display:absolute, regardless of whether it is a block-level element, it will be centered, but the center is not based on the contents of the internal Div, but the left side of the inner Div, The leftmost of the internal div is in the middle of the div (the premise external div sets the position:relative/absolute/fixed);

Inline elements are centered vertically

2.margin:0 Auto;

3.

Vertical Linehight

Several ways to center div in HTML