css实现水平垂直居中

总结一下了解的css实现水平垂直居中的方法。

可以在codepen上进行测试。

  • 2022.3.8更新,增加一些文本水平垂直居中的写法。codepen

    原始代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>

    <body>
    <div class="father">
    <div class="son"></div>
    </div>
    </body>

    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .father {
    border: solid 1px;
    width: 300px;
    height: 300px;
    }

    .son {
    background: #e4393c;
    width: 100px;
    height: 100px;
    }

    具体实现

flex 方法1——适用于未知宽高

给父元素加弹性盒属性,加justify-content , align-items属性即可

1
2
3
4
5
.father {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}

flex 方法2——适用于已知宽高

给父元素加弹性盒属性,子元素加 margin:auto

1
2
3
4
5
6
.father {
display: flex;
}
.son {
marginauto;
}

定位,父相子绝,配合transform属性——适用于未知宽高

父元素相对定位,子元素绝对定位,并且使用transform平移实现

1
2
3
4
5
6
7
8
9
10
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);/* 参考自己的位置向上向左各平移自身的50% */
}

定位,父相子绝,配合margin属性

父元素相对定位,子元素绝对定位,同时上下左右为0,同时加上margin:auto

1
2
3
4
5
6
7
8
9
10
11
.father {
position: relative;
}
.son {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

父元素display: table-cell,子元素display: inline-block;

将父元素转为一个表格单元,子元素转为行内块

1
2
3
4
5
6
7
8
.father {
display: table-cell; /*此元素会作为一个表格单元格显示(类似 <td> 和 <th>)*/
text-align: center; /*水平居中*/
vertical-align: middle; /*垂直居中*/
}
.son {
display: inline-block; /*将其转为行内块元素*/
}

纯定位方式实现

父相子绝,子元素 left , right 各50%,再使用 margin-left , margin-top , 移动子元素自身宽高的一半

1
2
3
4
5
6
7
8
9
10
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}

grid 方法1

1
2
3
4
5
.father {
display: grid;
align-content: center;
justify-content: center;
}

grid 方法2

父元素加display: grid;,子元素加align-self: center; justify-self: center;即可

1
2
3
4
5
6
7
.father {
display: grid;
}
.son {
align-self: center;
justify-self: center;
}

补充

1
2
3
<div class="father">
<span class="son">son</span>
</div>
1
2
3
4
5
6
7
8
9
10
.father{
background-color: red;
height: 100px;
text-align:center;
}

.son{
background-color: pink;
line-height:100px;
}

参考

写在最后

关于浏览器兼容性,

  • 完全不考虑并且布局较复杂,推荐使用grid(grid 就是为了解决复杂布局的)
  • 完全不考虑,flex和grid都是不错的选择;
  • 需要考虑移动端,建议使用flex而不是grid;
  • 需要兼容老版本的浏览器,建议使用纯定位方式实现