How does Bobo vertically center the content in the DIV

Although the DIV layout has basically replaced the table layout, the table layout and Div layout still have their own advantages and mutual advantages. For example, vertical center in table layout is a weakness of Div layout, but fortunately, the ever-changing CSS can be used flexibly to produce a quasi-vertical center effect, barely pass through. To vertically center the content in a DIV, you can use the following methods:

I. Line-height Method
If only one or several lines of text are vertically centered, it is the easiest to create, as long as the line height of the text is the same as the height of the container. For example:

P {Height: 30px; line-Height: 30px; width: 100px; overflow: hidden ;}
This code can align the text vertically in a paragraph.

Ii. padding method
Another method is similar to the line height method. It is also suitable for vertical center of one or several lines of text. The principle is to use padding to vertically center the content, for example:

P {padding: 30px ;}
This code is similar to the line-height method.

Iii. Table Simulation
The simulated table method uses the declaration of elements in CSS to display block elements like tables. The CSS attributes used include display and vertical-align. Let's take a look at the following HTML code:

<Div id = "box"> <Div id = "content"> center display </div>
Refer to the preceding HTML code to display the DIV with the outermost name "box" in a table style, then display the DIV with the name "content" in the box in a cell, and use vertical-align: in this way, the middle is vertically centered to simulate the same display mode as the table. The CSS code is as follows:

# Wrap {Height: 400px; display: Table ;}# content {vertical-align: middle; display: Table-cell; Border: 1px solid # ff0099; Background: #000; width: 400px ;}
However, this method has one drawback. Due to the high understanding of IE, it will produce errors. Therefore, this method is only valid for Firefox and does not work for IE. In this case, we need to find a correction method for IE, so we have another method.

Iv. Positioning Method
As the name suggests, the positioning method uses the position attribute of CSS to locate the element. It is also a simulation method. However, it provides good support for IE. Its HTML code is:

<Div id = "box"> <Div id = "sub"> <Div id = "content"> vertical center </div>
This Code contains a div named sub more than the previous method. It is used to locate the Div. The principle is: first, let the box be positioned out of relative position, and the sub is positioned relative to the box, located at 50% in the vertical direction of the box, and then let the real content in the content out of-50% in the vertical direction of sub, so as to produce the vertical center effect of content in the box, their CSS code is as follows:

# Wrap {border: 1px solid #000; Background: # f00; width: 400px; Height: 400px; position: relative ;}# subwrap {position: absolute; top: 50% ;} # Content {border: 1px solid #000; position: relative; top:-50%; color: # FFF ;}
This code can be normally centered in IE or Firefox.