div垂直居中

2017/11/09 21:32
阅读数 83

css3的方法(如果只用在手机端,足够了) 

display: -webkit-flex;
align-items: center;//子元素垂直居中
justify-content:center;//子元素水平居中

兼容ie8的方法

<div class="father">
    <div class="son"></div>
</div>
<style>
.father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}
</style>

更多解释请参考

获取屏幕宽高

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部