一、元素水平垂直居中的方法
- 通过flex布局
使用flex布局可以很方便地实现元素的垂直和水平居中,只需要在父容器上设置display:flex和justify-content:center,align-items:center即可
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- 使用绝对定位和transform属性
通过将子元素的position属性设置为absolute,left和top值都为50%,然后通过translate函数将其往左和往上移动子元素宽高一半的距离
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
二、元素不定宽高时的水平垂直居中方法
- 使用table-cell布局
使用table-cell布局同样可以实现元素的垂直和水平居中
.parent {
display: table-cell;
text-align:center;
vertical-align:middle;
}
注意:需要在父容器上加上display:table;来使display:table-cell生效。
- 使用grid布局
参考方式一中的内容,可以将display:flex改写成 display:grid,并添加如下内容,
.parent {
...
display: grid;
place-items: center;
}