<div class="parent">
<div class="child"></div>
</div>
1. 使用flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2. 使用绝对定位
.parent {
position: relative;
}
.child {
position: absolute;
/* top和left是以左上角为坐标原点 */
top: 50%;
left: 50%;
/* transform:translate的属性值为百分数时,是以元素自身为参考 */
transform: translate(-50%,-50%);
}
/* 或者 */
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
3. flex的另一种方法
.parent {
display: flex;
}
.child {
margin: auto;
}
4. table布局
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
5. grid布局
.parent {
display: grid;
}
.child {
justify-self: center;
align-self: center;
}
以上是我整理的一些方法,当然还有其他的,有待探讨。