CSS Div perfect Center method

There are many (horizontal/vertical) center methods in CSS. Today we can see a new method. Hey, I feel very useful. I have never seen it before. so remember today. next backup

HTML

The code is as follows:

Copy code

<DIV class = "demo center"> <DIV> </DIV> CSS . Center { /* Width must be supported but adaptive */ Position: relative; } . Center> *{ /* Ie8 +, ie7-use js or other methods */ Position: absolute; margin: auto; overflow: auto; top: 0; left: 0; bottom: 0; right: 0 ;} . Demo {width: 200px; height: 200px; background-color: #55DF00 ;} . Demo> div {width: 500px; height: 500px; background-color: #2A5F00 ;}

The result is shown in the following figure.

Of course there is no perfect person. This method also has its own limitations, that is, IE7-does not support this method.

Because absolute positioning is used, the child element will reside in the upper left corner of the parent element,

However, I still like this method very much. There are many differences with other center methods, and there is little interference with Element styles in sub-elements. It is quite helpful to use it.