Summary of various centering methods in CSS

The center of the CSS can be divided into horizontal and vertical centers. The horizontal center is divided into the center of the inner element and the block element centered in two cases, and the block element is divided into the center of the fixed width block element and the indefinite wide block element . These situations are described in more detail below.

First, the horizontal center

1. Center element in line

As the name implies, inline element centering is only for inline elements, such as text, Picture (IMG), button, and other inline elements, which can be implemented by setting Text-align:center to the parent element. Also, this method can be used if the block element property display is set to inline. But the first condition is that the child element must not be affected by float, otherwise everything is useless.

. div1{        text-align:center;    } <  class= "Div1">Hello World</div> 

2, block Element Center

(1), Fixed width block element center

Elements that satisfy a fixed width (the width of the block element is constant) and a block of two conditions can be centered by setting the left and right margin value to "auto".

. div1{
width:200px;
border:1px solid red;        margin:0 Auto;    } <class= "Div1">hello World</div>      

(2), indefinite wide block element center

In the actual work we will encounter the need to set the "block element of the indefinite width" center, such as page navigation on the pages, because the number of paging is indeterminate, so we can not set the width to limit its elasticity. (Indefinite wide block element: the width of the block element is not fixed.) )

There are three ways to center an indeterminate block of elements:

Method 1:

Add the elements you want to display to the table label, and then set the "left margin" value to "auto" for the table label, or use Display:table, and then set the element "left margin" value to "auto" to achieve centering. Behind the display:table; Method is more concise.

Why add a table tag? is to use the length of the table label Adaptive---that does not define its length nor the length of the default parent element body (table whose length is determined by the length of its text), so it can be regarded as a fixed-width block element, and then use the fixed-width blocky-centered margin method to align it horizontally.

Here's an example:

table{margin:0 Auto;}<Div><Table>  <tbody>    <TR><TD>    <ul>        <Li>Hello World</Li>        <Li>Hello World</Li>    </ul>    </TD></TR>  </tbody></Table></Div>

. wrap{    background: #ccc;    display:table;    margin:0 Auto;} <  class= "Wrap" > Hello World </div    >

Method 2:

Changing the display of block-level elements to the inline type (set to the inline element display), and then use Text-align:center to achieve the centering effect.

The advantage of this method compared to the first method is not to add no semantic tags, but there are some problems: it changed the display type of the block element to inline, so that there are fewer functions, such as setting the length value (Inline-block can be set to the width of the height).

. container{Text-align:center;}.    Container ul{List-style:none;    margin:0;    padding:0;  Display:inline; How does this sentence use all the same effect? }<Divclass= "Container">    <ul>        <Li>Hello World</Li>        <Li>Hello World</Li>    </ul></Div>

Method 3:

By setting float to the parent element, and then setting position:relative and left:50% to the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.

. wrap{    float:left;    position:relative;    left:50%;    Clear:both;}. wrap-center{    background: #ccc;    position:relative;    left:-50%;} <  class= "wrap">    <class = "Wrap-center" > Hello World</div></div>

First set the parent element wrap to clear the float and then left to float. Position to offset wrap to the right by 50%. Then define the child element to the left offset 50% relative to the parent element. Out of the parent element. Add a border to understand some of it. It is also possible to use absolute positioning.

Second, vertical center

Vertical centering is a single line of text that is determined by the height of the parent element, and multiple lines of text that are determined by the parent element height.

1. The method of vertical centering of a single line of text that is determined by the parent element height is achieved by setting the height of the parent element and Line-height. (Height: The altitude of the element, Line-height: As the name implies, row height, which is the distance between the line and the baseline in the text).

. Wrap h2{    margin:0;    height:100px;    line-height:100px;    Background: #ccc;} <  class= "wrap">    <H2>Hello World</h2></div>

2. Multi-line text with parent element height determination

There are two ways of doing this:

Method 1:

Use the Insert table (including TBODY, TR, TD) labels and set the Vertical-align:middle.

. wrap{    height:300px;    Background: #ccc;    Vertical-align:middle;   /*  */}<table>    <tbody>        <tr>            class="  Wrap">                <div>                    <p>hello world</p>                    <p>hello world</p>                    <p>hello world</p>                </div>            </td>        </tr>    </tbody></table>

. wrap{background: #ccc;    display:table; Vertical-align:middle;}<Divclass= "Wrap">    <P>Hello World</P>    <P>Hello World</P>    <P>Hello World</P></Div>

Method 2:

The display of the block-level element is set to Table-cell (displayed as a table cell), and the Vertical-align property is activated. However, this method is poor compatibility, IE6, 7 does not support this style.

. wrap{height:300px;        Background: #ccc; Display:table-cell;/*ie8 above and Chrome, firefox*/vertical-align:middle;/*ie8 above and Chrome, firefox*/}<Divclass= "Wrap">    <P>Hello World</P>    <P>Hello World</P>    <P>Hello World</P></Div>

Note: The main reference to the course network tutorial

Summary of various centering methods in CSS