1.可以利用绝对布局来进行实现,
.parent {
position: relative;
}
.children {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
这样子的写法可以实现chlidren类下的内容水平垂直居中,但是如果children类对应的是img标签的话,可能会出现这种情况,在图片路径找不到的时候,高度会被拉长
2.利用table布局的方式
.parent {
display: table;
}
.children {
display: table-cell;
text-align: center;
vertical-align: middle;
}
如果children下的内容是img的话,需要在img中添加margin:auto(自己测试的,如果有误望指出)
如果children下的内容不是img的话,则不需要。
3.
.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
该方法存在兼容问题,慎用
4.flex布局
.children {
display: flex;
align-items: center;
justify-content: center;
}