首页 > 代码库 > 由12306出错想到的div垂直居中的问题
由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了
看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下12306这么大的网站肯定是可以垂直居中的,
试了一下,果然没有让我失望,适应各种分辨率垂直居中。
太好了,果然右键源代码
div class="err_text"> <ul id="error" > <li id="err_top"> </li> <li id="err_bot"> 网络可能存在问题,请您重试一下!</li></ul></div>
然后再看一下css是怎么写的吧
.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;}
这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了
由12306出错想到的div垂直居中的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。