大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。
作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。
在开发中经常需要实现的一个页面效果是：元素的垂直居中。
【CSS|CSS实现水平垂直居中的6种方式】在此记录一下，经常使用的几种方法。
前提：元素之间的布局关系如下，需要实现son元素的垂直居中
.son {
width: 200px;
height: 200px;
background-color: pink;
}方法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;
/*设置单元格内容的水平位置*/
}多有参考网上的其他的方案，仅以此记录一下，方便后续查找使用。
??欢迎素质三连[点赞 + 收藏 + 评论]
我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。
推荐阅读
- 编程语言|疫情下的就业市场，每一位前端工程师，都在勇闯天涯！
- web|web前端三大主流框架指的是什么
- css|web前端三大主流框架是什么（）
- 中间件|比 Spring Boot 快 10 倍的 Bootique 框架
- HTML和CSS|移动端布局(上）
- html网页设计|使用html+css+js实现一个静态页面（含源码）
- web课程设计网页规划与设计|一个超好看的音乐网站设计与实现(HTML+CSS)
- html网页设计|web前端期末大作业（青岛旅游网页主题网站设计——青岛民俗4页 HTML+CSS 民俗网页设计与制作 web网页设计实例作业 html实训大作业）
- javascript|vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)