Css implements vertical and horizontal center instance code

First, we think that the center is half the margin and the left margin of the current window, so we have the following css style:

The code is as follows:	Copy code
. Center { Left: 50%; Top: 50%; Position: fixed; }

We soon discovered that the problem has not been solved,

To center the image, we need to move the object to the left and up half of the image width and height respectively. The final style is as follows:

The code is as follows:

Copy code

. Center { Left: 50%; Margin-top:-50px; Margin-left:-100px; Top: 50%; Position: fixed; } <P style = "background: #900; color: # 00f; font: bold 12px/24px Helvertica, Arial, sans-serif; height: 24px; width: 370px; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <Br/> <Br/> <P style = "background: #090; color: # 00f; font: bold 12px/2em Helvertica, Arial, sans-serif; height: 2em; width: 370px; overflow: hidden; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>

[Ctrl + A Select All tips: You can modify some code and then press run]
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, like a valid <td> element, the display: table-cell element must appear as the descendant of the display: table element.

Advantages:

Needless to say, it's a table. The results are exactly the same as those in the table.
Disadvantages:

Invalid in IE

Conclusion: This article shows that it is not difficult to implement css center. Sometimes, when we understand the principle, things become very simple.