首页 > 其他 > 详细

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

时间:2017-05-09 13:27:02      阅读:288      评论:0      收藏:0      [点我收藏+]

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在页面垂直居中方法---增强改进版

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!