The middle can be divided into CSS horizontal center and vertical center . Horizontal center into the center line elements and block element centered both cases, the bulk element is divided into fixed-width center block elements and the indefinite width center block elements . The following details these types of situations.
First, the middle level
1, the center line element
As the name suggests, it is the only center inline elements for inline elements, such as inline elements text (text), images (img), buttons, etc., by setting text-align to the parent element: to achieve center. Further, if the block is set to display element properties inline, this method can also be used. But there is a primary condition that the child elements must not affect the float, otherwise everything is useless.
.div1{
text-align:center;
}
<div class="div1">Hello world</div>
2, the center block elements
(1), a fixed width center block element
Element satisfies predetermined width (the width of the bulk element width is a fixed value) and the bulk of the two conditions provided by "left margin" is "auto" to achieve centering.
.div1{
width:200px;
border:1px solid red;
margin:0 auto;
}
<div class="div1">Hello world</div>
(2), variable width block elements centered
In practice, we encounter the need to "variable width block elements" set centrally, such as page navigation on the page, because the number of pages is uncertain, so we can not set the width to its elastic limit. (Variable width block elements: the width of the block is not fixed to the element width.)
There are three ways for variable width block for centering elements:
method 1:
The added element to be displayed among the table tag, then the tag table is set to "left margin" is "auto" to achieve centering; or display: table; then set the element "left margin" is "auto" to achieve centering . The back of the display: table; method will be more concise.
Why join table tag? Is the length of the adaptive table using a tag does not define the length thereof --- i.e., the default length is not the parent body element (its length table in accordance with its length determined within the text), and therefore can be considered as a block of a predetermined width element, and then using the method given width of the margin of the block-centered, so that the horizontal center.
Examples are as follows:
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;
}
<div class="wrap">
Hello world
</div>
Method 2:
Changing the block-level elements as inline type display (a display element disposed within a row), then use the text-align: center centering effect is achieved.
Advantages compared to the first method of this approach is no semantic tags do not increase, but there are some problems: display type will block elements changed inline, became inline elements, some less so features such as value set length (inline-block can become a set width and height).
{.container
text-align = left: Center;
}
.container ul {
List-style: none;
margin: 0;
padding: 0;
Run the display: inline; // how this sentence is the same with no effect?
}
<Div class = "Container">
<UL>
<Li> the Hello World </ Li>
<Li> the Hello World </ Li>
</ UL>
</ div>
Method 3:
Set by the parent element to float, then the parent element is set to position: relative and left: 50%, child element set position: relative and left: -50% level to achieve centering.
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">Hello world</div>
</div>
First set the parent element wrap clear float, then left floating. Let wrap positioning offset to the right by 50%. Child element is then defined with respect to the parent element shifted to the left by 50%. From the parent element. Add borders can understand a little. Also with absolute positioning it is also possible.
Second, vertical centering
Single line of text can be divided into vertical center height determining the parent element, as well as multi-line text determined by the height of the parent element.
1, the vertical center line text A method of determining the height of the parent element is achieved by providing highly consistent height of the parent element and line-height. (Height: the height of the element, line-height: the name implies, high row, in the text refers to the distance between the base line and between lines).
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>Hello world</h2>
</div>
2, determine the height of the parent element of a multi-line text
There are two ways:
method 1:
Use Insert Table (including tbody, tr, td) tag, and set vertical-align: middle.
{.Wrap
height: 300px by;
background: #ccc;
vertical-align: Middle; / * TD default label to the default settings for the vertical-align middle, do not need to be explicitly set * /
}
<Table>
<tbody >
<TR>
<TD class = "wrap">
<div>
<P> the Hello World </ P>
<P> the Hello World </ P>
<P> the Hello World </ P>
</ div>
</ TD>
</ TR>
</ tbody>
</ Table>
.wrap{
background:#ccc;
display:table;
vertical-align:middle;
}
<div class="wrap">
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</div>
Method 2:
Block-level elements provided for the display table-cell (display unit as a table), the activation vertical-align property. However, this method is relatively poor compatibility, IE6,7 does not support this style.
.wrap{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
<div class="wrap">
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</div>