单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
.text_div{
height: 120px;
line-height: 120px;
}
利用表布局
.father {
display: table;
}
.children {
display: table-cell;
vertical-align: middle;
}
flex布局
.center-flex {
display: flex;
flex-direction: column;//上下排列
justify-content: center;
}
绝对布局方式
已知高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
未知高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
垂直水平居中根据上方结合
flex方式
.parent {
display: flex;
justify-content: center;
align-items: center;
}
grid方式
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
