CSS implements the DIV content Center (vertical) method

First, we need to have a concept: CSS can be implemented for any table layout. CSS can be implemented, but table cannot.

Here are several examples:

1. Center a single line of content
It is easiest to consider a single row. No matter whether or not the container is given a fixed height, you only need to set the line-height and height for the container and make the two values equal, plus over-flow: hidden is enough.

The code is as follows:	Copy code
. Middle-demo-1 { Height: 4em; Line-height: 4em; Overflow: hidden;     }

Advantages:
1. Both block-level and inline polar elements are supported.
2. Support for all browsers
Disadvantages:
1. Only one row can be displayed
2. The center of Loen 'blog Images and so on is not supported in IE.
Note that:
1. Use relative height to define your height and line-height
2. If you don't want to destroy your layout, overflow: hidden must
Why?

Compare the following two examples:

The code is as follows:	Copy code
<P style = "background: #900; color: # 00f; font: bold 12px/24px Helvertica, Arial, sans-serif; height: 24px; width: 370px; "> loen'blog </p> <P style = "background: #090; color: # 00f; font: bold 12px/2em Helvertica, Arial, sans-serif; height: 2em; width: 370px; overflow: hidden; "> loen'blog </p>

The previous height is the absolute unit px, and there is no hidden overflow. The next height is the relative unit em, and the overflow is hidden. If your browser supports font amplification, you can zoom in the font to see what will happen.

2. Multi-line content is centered and the container height is variable
It is also very easy to give consistent padding-bottom and padding-top.

The code is as follows:	Copy code
. Middle-demo-2 { Padding-top: 24px; Padding-bottom: 24px;     }

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

3. Use containers as table units
CSS provides a series of diplay attribute values, including display: table, display: table-row, and display: table-cell. Elements can be displayed as table units. This is followed by vertical-align: middle, which is the same as valign = "center" in the table.

The code is as follows:	Copy code
. Middle-demo-3 { Display: table-cell; Height: 300px; Vertical-align: middle;     }

Unfortunately, IE does not support these attributes, but the display effect on other browsers is perfect.
Note that a valid element must be in
The display: table-cell element must appear as the descendant of the display: table element. Advantage: Needless to say, it is a table. The results are exactly the same as those in the table. Disadvantage: it is invalid in IE.

4. Attack the virus! Solve absolute center in IE with IE bug
I have to say that IE is really a bad browser, and the definition in CSS1 is not supported, so we need to turn into a large circle to build the center. But as I said, CSS can be implemented for any table layout, even in IE. I have studied the IE layout mode for many years and found a method that can be absolutely centered in IE. This method is based on the bug of IE layout and can be regarded as a virus attack. As for the principle, don't ask me. This is a dedicated course of study. Besides, it's hard to tell me a few words, as long as it's easy to use.

The code is as follows:	Copy code
. Middle-demo-4 { Height: 300px; Position: relative;     } . Middle-demo-4 div { Position: absolute; Top: 50%; Left: 0;     } . Middle-demo-4 div { Position: relative; Top:-50%; Left: 0;     }

5. Integration 3 and 4. Write vertical center containers that support all browsers!
The idea is to use CSS hack of IE and non-IE browsers to integrate the CSS of 3 and 4 and write vertical center containers compatible with mainstream browsers. The specific code is not given. Everyone's right is used as an exercise. The example can be found in the appendix below.
Supported browsers: IE6 +, Mozilla 1.7, Netscape Navigator 8, Opera 8.0 +, Firefox 1.0 +, and Safari 1.0 +
In IE5, correct the model.
Presumably supported browsers: Mozilla 1.5 +, Netscape Navigator 7 +, and Opera 7 +
Browser not tested: Konqueror