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

div在页面垂直居中方法---增强改进版

时间:2017-05-09 13:49:58      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:top   技术分享   images   解决办法   tom   开发   style   min   解决   

div在页面垂直居中方法---改进版

.wrap{
    background: #ffffff;
    position:absolute;
    margin:auto;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    height: 630px;
}

效果图:

技术分享

 

在开发中遇到个问题,

当屏幕height小于630px时,会出现如下图,顶部的logo,通过滚动滚动条,也看不到。

 

技术分享

 

解决办法:使用媒体查询

.wrap{
    background: #ffffff;
    position:absolute;
    margin:auto;
    top: 0;
    /*bottom: 0;*/
    left:0;
    right: 0;
    height: 630px;
}
@media screen and (min-height: 630px) {
    .wrap {
        bottom: 0;
    }
}

当高度小于630px时,去掉bottom:0;直接设置top:0;

效果图,如下:

技术分享

 

div在页面垂直居中方法---增强改进版

标签:top   技术分享   images   解决办法   tom   开发   style   min   解决   

原文地址:http://www.cnblogs.com/baiyangyuanzi/p/6829978.html

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