CSS实现水平垂直居中的6种方式

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

在开发中经常需要实现的一个页面效果是：元素的垂直居中。

在此记录一下，经常使用的几种方法。

前提：元素之间的布局关系如下，需要实现son元素的垂直居中

<style>.son {width: 200px;height: 200px;background-color: pink;}</style><div class="parent"><div class="son"></div></div>

方法1：使用绝对定位 + transform，给子元素添加如下样式

这种方式比较常用，父子元素都不确定宽高的情况也适用。

如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transform: translate(-100px, -100px);

.work {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

方法2：使用绝对定位 + margin，给子元素添加如下样式

这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top: -50%;不能达到垂直居中的效果

.work1 {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;}

方法3：使用绝对定位 + margin: auto，给子元素添加如下样式

父子元素宽高都未知时也适用。

.work2 {position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin:auto;}

方法4：父元素使用flex布局，并设置相关的属性值为center

这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。

有关flex布局的使用可以参考阮一峰老师的文章Flex布局教程

.par-work {height: 100vh;display:flex;justify-content:center;align-items:center;}

方法5：使用table-cell实现

这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。

.par-work2 {height: 500px;width: 500px;display: table-cell;vertical-align: middle;text-align: center;}.son-work2 {display: inline-block;}

方法6：使用grid布局

这种方式适用于父元素高度确定的情况，有关gird布局的使用可以参考阮一峰老师的文章CSS Grid布局教程

.par-work3 {display: grid;height: 500px;}.son-work3 {align-self: center; /*设置单元格内容的垂直位置*/justify-self: center; /*设置单元格内容的水平位置*/}

多有参考网上的其他的方案，仅以此记录一下，方便后续查找使用。

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。