Summary of css text vertical center implementation methods

In fact, a Box consists of many rows and many elements. vertical-align only acts on elements in the same row, and its vertical is not relative to the entire Box. A 60 PX height is defined above, but there are many lines in this Box, and the text cannot be aligned to the center. Therefore, if you want to align the text in the middle, you need to define a line-height attribute for it, so that the line-height is 60px, and it can work on the vertical-align of a line.

To vertically center a single line of text, you only need to ensure that the div height and the row height are consistent. Use the following code:

The code is as follows:	Copy code
CSS code: # Div-{ Height: 60px; Line-height: 60px; } XHTML code: <Div id = "div-a"> Visit @ </Div>

If you want to center the text in the div horizontally, add "text-align: center;". The code is as follows:

The code is as follows:	Copy code
CSS code: # Div-{ Text-align: center; Height: 60px; Line-height: 60px; } XHTML code: <Div id = "div-a"> Visit @ </Div>

Note: If the parent-level element defines TEXT-ALIGN: center, this means that the content in the parent-level element is centered. For IE, this setting is enough. However, it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto; MARGIN-LEFT: auto;" when the sub-element is defined ;".

Vertical center of multi-row text in DIV
3.1 Use Table to vertically center multiple Div lines of text
For multi-line text, the vertical center method above won't work. You can nest a table in the div, because vertical-align: middle; is effective for the vertical center of the table.

<Div>

The code is as follows:	Copy code
<Table> <Tr> <Td style = "vertical-align: middle; height: 30px;"> In div, the vertical-align: middle; attribute of table is used to vertically center multiple lines of text. </Td> </Tr> </Table> </Div>

3.2 use Padding to vertically center the text with multiple lines of unknown height in Div
For multi-line text, if the container height is not taken into account, you can define padding-bottom and padding-top to make the upper and lower padding values the same, you can also achieve vertical center of div multi-line text. This is a vertical center mode that looks centered. It only fills the text with <div> completely. This implementation method has the following features:

Advantages:
1. Both block-level and inline polar elements are supported.
2. Supports non-text content
3. Support for all browsers
Disadvantages:
Container is not fixed height

3.3 Use Display to simulate a Table to vertically center multiple div lines of text
There is a display attribute in CSS that can be used to simulate <table>. You can use this attribute to simulate <div> <table> so that vertical-align can be used. Note: the use of display: table and display: table-cell must be set on the parent element, and the latter must be set on the child element, therefore, we need to add a <div> element to the text to be located.

The code is as follows:	Copy code
// CSS code Div # wrap { Height: 200px; Display: table; }    Div # content { Vertical-align: middle; Display: table-cell; Border: 1px solid # FF0099; Background-color: # FFCCFF; Width: 40px; } // Html code <Div id = "wrap"> <Div id = "content"> <Pre> Display simulates table to implement vertical center display of div multi-line text! </Pre> </Div> </Div>

However, Internet Explorer 6 does not support display: table and display: table-cell. Therefore, this method is invalid in Internet Explorer 6 and earlier versions.

Vertical center in Explorer 6:

The code is as follows:

Copy code

// CSS code Div # wrap { Border: 1px solid # FF0099; Background-color: # FFCCFF; Width: 760px; Height: 400px; Position: relative; }   Div # subwrap { Position: absolute; Border: 1px solid #000; Top: 50%; }   Div # content { Border: 1px solid #000; Position: relative; Top:-50%; } // Html code <Div id = "wrap"> <Div id = "subwrap"> <Div id = "content"> <Pre> Now we want to align the text vertically! </Pre> </Div> </Div> </Div>