弹出框居中对齐

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

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://ask.aseoe.com/question/54