The problem of vertical centering of divs thought of due to error 12306_html/css_WEB-ITnose

Today I wanted to see if there were any tickets left to go home on New Year’s Day. I secretly opened 12306 and started to check the tickets for home. I found that I couldn’t find the tickets. When I checked again, I made an error

I was very depressed and confused when I saw this, but suddenly I thought that I have been wanting to vertically center the div recently, so I quickly tried it. A website as big as 12306 can definitely be vertically centered.

I gave it a try , and it really did not disappoint me, adapting to vertical centering of various resolutions.

Great, as expected, right click on the source code

div class="err_text">                         <ul id="error" >                         <li id="err_top">                                                  </li>                                                  <li id="err_bot">　　网络可能存在问题，请您重试一下！</li></ul></div>

Then take a look at how the css is written

.err_text{    position:absolute;    margin-top:-159px;        top:50%;    left:50%;    margin-left:-247px;    width:495px;    height:282px;}#error{    width:495px;    margin-left:auto;    margin-right:auto;    list-style:none;}#error li{    list-style:none;}#err_top{    background:url(err_top.gif) no-repeat;    height:78px;    line-height:78px;    width:495px;    }#err_bot{    background:url(err_bot.gif) no-repeat;    height:204px;    padding-top:50px;    width:495px;        text-align:center;    font-size:14px;    font-weight:bold;}

You must have discovered at this time that the key code is actually top:50%, left:50%. Of course, the premise is that it must be positioned absolutely, so that centering can be achieved