css 实现居中方式(水平&垂直)

前端 · 2022-06-30 ·

1.水平居中:行内元素

通过对其父元素设置 text-align:center 和 display:block

.father{
text-align:center;
display:block; // 如果父元素属于块状元素 则忽略此属性
}

2.水平居中:块状元素

设置外边距 margin

.father{
margin:0 auto;
}

3.水平居中:多个块状元素

将子元素设置为 inline、inline-block

.father{
text-align:center;
}
.son{
display:inline-block;
}

4.水平居中:多个块状元素

通过flex布局实现

.father{
display:flex;
justify-content:center;
}

5.垂直居中:单行的行内元素(line-height)

通过设置 height 和 line-height 等值

.father{
height:100px;
line-height:100px;
}

6.垂直居中:多行的行内元素

通过 display:table-cell 和 vertical-align:middle

.father{
width:100px;
height:100px;
display:table-cell;
vertical-align:middle;
}

7.垂直居中:多行的行内元素

通过伪类 ::after 高度和父类高度一致

.father{
width:100px;
height:100px;
text-align:center;
}
.father::after{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.son{
display:inline-block;
vertical-align:middle;
}

8.垂直居中:已知子元素的宽和高

.father{
    position:relative;
    width:200px;
    height:200px;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.father{
    position:relative;
    width:200px;
    height:100px;
}
.son{
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    margin-left:-50px;
    margin-right:-50px;
}

9.水平垂直居中:未知高度和宽度元素

.father{
    position:relative;
    width:200px;
    height:100px;
}
.son{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

10.水平垂直居中: flex

.father{
    display:flex;
    justify-content:center;
    align-items:center;
}
%