[Go] How to center the content in a div vertically

Transferred from: http://blog.163.com/yan_1990/blog/static/197805107201211311515454/

Although the Div layout has largely replaced the table layout, the table layout and Div layout are still the same, and each has its advantages. For example, the vertical center of the table layout is a major weakness of the div layout, but fortunately the ever-changing CSS can be used flexibly, you can make a quasi-vertical center effect, barely clearance. To make the content in the div vertically centered, there are only a few ways, and so I enumerate:

First, row height (line-height) method
If you want to vertically center only one line or a few words, it is the most simple to make, as long as the line height of the text and the container is the same height, such as:

p {height:30px; line-height:30px; width:100px; overflow:hidden;}
This code allows the text to be centered vertically in the paragraph.

Second, the internal margin (padding) method
The other approach is similar to the line height method, which is also suitable for vertical centering of one or several lines of text, using padding to center content vertically, such as:

p {padding:30px;}
This code has the same effect as the Line-height method.

Three, the simulation table method
The simulation table method is actually using CSS in the declaration of elements to make the block elements like a table display, the use of CSS properties have display, vertical-align and so on. Let's look at the following HTML code:

<div id= "box" > <div id= "Content" > Center display </div> </div>
Referring to the above HTML code, the outermost div named box is presented in a tabular style, and then the Div named content in box is displayed in a cell, and the vertical-align:middle is used to center it vertically so that it is modeled as if it were a tabular display. The CSS code is as follows:

#wrap {height:400px; display:table;} #content {vertical-align:middle; display:table-cell; border:1px solid #FF0099; BAC Kground: #000; width:400px; }
But this method has a disadvantage, because the Internet Explorer to high understanding will produce errors, so this method is only valid for Firefox, ie invalid, since this, we need to find out the correct method of IE, so there is another way.

Four, positioning method
As the name implies, the positioning method is the use of CSS positioning attributes position element positioning method, but also belongs to the simulation method, but its support for IE is good. Its HTML code is:

<div id= "box" > <div id= "sub" > <div id= "Content" > Vertical center </div> </div> </div>
This code is more than the last method of a div named sub, its role is to locate, the principle is: first let box for relative positioning, sub relative to box out of relative positioning, in box vertical direction of 50%, Let the contents of the real content in sub-vertical direction of 50%, so that the content in box vertically centered effect, their CSS code is as follows:

#wrap {border:1px solid #000; background: #F00; width:400px; height:400px; position:relative;} #subwrap {Position:absolu Te top:50%; } #content {border:1px solid #000; position:relative; top:-50%; color: #FFF;}
This code, whether in IE or Firefox, can be properly centered

[Go] How to center the content in a div vertically