一个弹出框如何在屏幕垂直居中

如何让一个弹出框在各种分辨率的屏幕中垂直居中,有没有简洁高效的方法?
已邀请:

Aseoe - 爱思资源网创始人

赞同来自:

很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法:

1、在知道子元素宽度与高度的情况下进行居中,采用位置定位:absolute + margin
.parent { position: relative;}
.child { position: absolute; width: 100px; height: 60px; top: 50%; left: 50%; margin: -30px 0 0 -50px;}


2、在不知道子元素高与宽的情况下,采用位置定位:absolute + transform
.parent { position: relative;}
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}


3、采用 flexbox 进行居中对齐
.parent { display: flex; justify-content: center; align-items: center;}
.child { }


选择某范围内的子元素

极乐网络 - http://www.dreawer.com

赞同来自:

楼上的是正解!
可以多来我网站看看——dreawer.com

晓晓少年

赞同来自:

.parent { position: relative;}
.child { position: absolute; top: 0; left: 0; right:0; bottom:0; margin:auto;}
 

永恒

赞同来自:

.img{ position:fixed;
    background:url(../images/banner20160702.jpg) 50% 50% no-repeat #fff;
    z-index:9998;
    width:100%;
    height:100%;
    top:0;
    left:0;
    }

要回复问题请先登录注册