CSS垂直居中布局解决方案

垂直居中布局解决方案

<div class="parent">
<div class="child">demo</div>
</div>

1. table-cell + vertical-align

.parent {
display: table-cell;
vertical-align: middle;
}

2. absolute + transform

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateX(-50%);
}

3. flex + align-items

.parent {
display: flex;
align-items: center;
}