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

Posted 2020-09-17 白杨-M

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；

效果图，如下：