DIV+CSS implementation of unknown wide-height elements vertically horizontally centered

The DIV+CSS implements the unknown wide-height element vertically horizontally centered. Many students in the interview will encounter such a problem: How to use Div+css method to achieve an unknown width of the high pop-up box vertical horizontal center?? If you use JS, it is good to do, but the use of JS will affect the performance of the page, and can use CSS to achieve what to do with JS it, hey

<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title>div+css to achieve unknown width and height elements vertical Horizontal Center </title> <style> *{margin:0; padding:0;            }. box {width:1120px;            height:968px; Text-Align:center;        Background: #eaeaea; }. Box span {display:inline-Block; Height: -%; Vertical-Align:middle;            }. Box div {background: #ccc; /*Vertical-align:middle, the picture of the words with this attribute, div words with the Display:block attribute*/Display:inline; }    </style>class="Box"> <!--"0.jpg"alt=""/>--> <div>ASDEWQ</div> <span></span></div></body>
DIV+CSS implementation of unknown wide-height elements vertically horizontally centered