html div 垂直居中对齐的几种方式
<div class="parent">
<div class="child"></div>
</div>
方式1 position, transform, 需要父子属性共同决定
.parent{
position: relative;
height: 100%;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 200px;
background-color: blue;
}
方式2 flex布局 只需要父属性设置即可
.parent{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.child{
width: 300px;
height: 200px;
background-color: blue;
}