How to vertically center a div in CSS

When it comes to this question, perhaps someone will ask that CSS does not have the Vertical-align property to set the vertical center? Even some browsers do not support I just need to do a little CSS

Hack technology can be AH! So here I have to say two more words, CSS does have a vertical-align property, but it only for the (X) HTML element has the valign attribute of the element is born

such as <td>, <th>, <caption>, etc. in table elements, and elements like <div>, <span>, are not valign features, So using vertical-align is not up to them.

Role.

Single Line Vertical Center

If a container has only one line of text, it is easier to set the method is the height of the row line-height and the actual height of the value equal to

For example:

<class= "Div1"> Vertical Center of single line text, just set height and line-height value </  div>

The CSS that corresponds to the setting is:

{            border: 1px red solid;             height: 25px;             line-height: 25px;             Overflow: hidden;        }

Vertical centering of multiple lines of unknown height text

This can be achieved by padding the same value as the vertical center of the text.

For example:

<class= "Div2"> Multiple lines of unknown height text vertically centered, only need to set padding value the same can be </  div>

The corresponding CSS:

{
         padding: 25px;          Border: 1px blue solid;          width: 300px;                    }

Multi-line text fixed height vertically centered

At the beginning of this article, we have said that the Vertical-align property in CSS only works on the (X) HTML tag that has the valign attribute, but there is also a display in the CSS

Properties are capable of simulating <table>, so we can use this property to allow <div> simulation <table> to use Vertical-align. Note that the display:table and

Display:table-cell, the former must be set on the parent element, the latter must be set on the child element, so we need to locate the text to add another <div> element:

For example:

<class= "Div3">     <class= " Content> Multiline text is vertically centered, which simulates the Vertical-align property in table and requires attention to display:table and display: Table-cell use Method            , display:table is used to set on the parent element, Display:table-cell, must be set on the     child element </Div  ></div>

The corresponding CSS is:

      {            display: table;             height: 100px;        } {display: Table-cell;                                          Vertical-align: Middle;             Border: 1px solid Green;             width: 400px;        }

This approach does not work under IE6, and Internet Explorer 6 does not correctly understand display:table and Display:table-cell, so it can be achieved by absolute positioning under IE6, but IE6 is not generally considered in the range.

How to vertically center a div in CSS