CSS centered, Central

In my technique, there are 4 middle-centered methods:

1.position:absolute; top:50%;left:50%; Margin:-X 0 0-x;

This is the absolute positioning of the method, through the algorithm to move, the disadvantage is to know the element height & width.

2.vertical Align Middle

In element, as long as the parent layer is known to be high, the child layer can be moved to the middle through the vertical align middle, of course, the parent layer must also have the text Align Center, or the child layer margin auto; Display:block;

3. In the table

The element in the table TR TD can be simply centered. The disadvantage is that table and TR must be height 100%; width:100%

4. Simulate the table CSS yourself

5.

<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"class= "height"><Head>    <title></title>    <style>        *{margin:0;Height:0;        }. Height{Height:100%;        }. Body{Height:100%;Background-color:Red;Overflow:Hidden;text-align:Center;position:relative;        }. Body::after{content: "";vertical-align:Middle;Display:Inline-block;width:1px;Height:100%;        }. Content{Display:Inline-block;vertical-align:Middle;width:500px;Background-color: White;padding:50px;position:relative;        }    </style></Head><Bodyclass= "Body">    <Divclass= "Content">Asd</Div></Body></HTML>

This is the same principle, but it has been a elem since.

CSS centered, Central