码迷,mamicode.com
首页 > 其他好文 > 详细

由12306出错想到的div垂直居中的问题

时间:2014-12-17 16:03:31      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   io   color   os   sp   on   

今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了bubuko.com,布布扣

看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下12306这么大的网站肯定是可以垂直居中的,

试了一下,果然没有让我失望,适应各种分辨率垂直居中。

太好了,果然右键源代码

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

然后再看一下css是怎么写的吧

bubuko.com,布布扣
.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;

}
View Code

这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了

由12306出错想到的div垂直居中的问题

标签:style   blog   http   ar   io   color   os   sp   on   

原文地址:http://www.cnblogs.com/bjjjunjie/p/4169576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!