CSS 实现：父元素包含子元素，子元素垂直居中布局

☊【实现要求】：父元素包含子元素，子元素垂直居中布局

<div class="demo5">
<div class="child">A</div>
</div>

√【实现】：

♪ 子元素 A 宽高已知，相对于父元素水平垂直居中

position: absolute

.demo5 {
width: $px;
height: $px;

position: relative; // 定位父元素

.child {
width: 400px;
height: 50px;

position: absolute; // 相对于父元素定位
top: 50%;   // 使用百分比定位
left: 50%;  // 使用百分比定位
margin-top: -25px;   // 向上偏移自身高度的一半
margin-left: -250px;     // 向左偏移自身宽度的一半
}
}

♫ 子元素 A 宽高未知，相对于父元素水平垂直居中

position: absolute

.demo5 {
width: $px;
height: $px;

position: relative; // 定位父元素

.child {
width: $px;
height: $px;

position: absolute; // 相对于父元素定位
margin: auto;   // 上下左右margin都自适应
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

position: absolute

CSS3

.demo5 {
width: $px;
height: $px;

position: relative; // 定位父元素

.child {
width: $px;
height: $px;

position: absolute; // 相对于父元素定位
top: 50%;   // 使用百分比定位
left: 50%;  // 使用百分比定位
transform: translate(-50%, -50%);   // 向X轴/Y轴偏移自身宽度/高度的一半
-webkit-transform: translate(-50%, -50%);
}
}