【CSS-task8】

css中有哪些方法可以实现垂直居中？

分享人：邹志程

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在前端开发过程中，对页面进行布局时，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端工程师的基本功。

2.知识剖析

1、头部和顶部使用相同大小的padding值可以实现居中。
2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中。
4、使用position、transform实现元素垂直居中。
5、使用position结合margin：auto实现垂直居中。
6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
7、通过verticle-align:middle实现行内垂直居中。

3.常见问题

1、使用line-height设置垂直居中时，为什么设置line-height:100%不管用？
2、verticle-align:middle相对父元素不能垂直居中？

4.解决方案

1、 从官方文档看linr-height设置百分比是基于当前字体尺寸的百分比，所以这里的百分比是不是相对父元素而言的，而是相对于字体尺寸的， 所以想要用line-height垂直居中，值不能设为100%，
2、vertical-align只作用于在同一行内的元素，它需要根据同一行找到参照的基线，而一个Box中由很多行很多元素组成， 它的垂直并不是相对于整个Box而言的，所以使用vertical-align:middle时不能对齐到父元素最中央的位置。 解决方法是定义一个同级的行内元素，让这个元素找到基线，或者配合line-height父元素内设置行高和box的高度一样，box内就只有一行，这时verticle-align:middle就能生效了。

5.代码实战

6.拓展思考

在实现垂直居中的情况下，怎样让元素水平方向也居中？
常用到的水平居中：
1、行内元素水平方向居中text-aligh
2、定宽块级元素，给元素设置margin:0 auto实现水平居中。
3、弹性布局下父元素添加：justify-content: center;
4、position结合transform时：水平方向left:50%，再用translate X轴方向偏移-50%
5、使用position结合margin时：水平方向添加left和right的相同定位值

7.参考文献

参考一：菜鸟教程CSS 布局 - 水平 & 垂直对齐

参考二：菜鸟教程flex布局

8.更多讨论

1、padding可以实现垂直居中，为什么不推荐用margin呢？
2、为什么使用transform：translate（-50%，-50%），可以让元素居中。
3、使用margin：auto实现水平居中时需要注意什么。

鸣谢

感谢大家观看

BY :邹志程