这里是修真学院的前端小课堂，每篇分享文章都从【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践][扩展思考][更多讨论][参考资料]前端知识/技能八个方面深度剖析，本文分享：【CSS实现垂直居中有哪些方式（方法总结）】1.背景介绍44年前我们把人送上了月球，但是我们在CSS中还是做不好垂直居中。——@詹姆斯·安德森2。知识解析垂直居中就是垂直居中。下面我将讲解CSS中实现垂直居中的几种方法：1、单行文本垂直居中方法说明：该方法只适用于单行文本，情况比较简单。只需将行高设置为该对象的高度即可使文本居中。2、多行文字垂直居中方法说明：2.1父元素显示：table-cell，vertical-align：middle；2.2使用表格进行布局；2.3居中多行内容，容器高度可变，也很简单，给定一致的padding-bottom和padding-top；3、div:table垂直居中说明：表格标签中，单元格框中的单元格内容水平垂直居中。display:table该元素将显示为类似于table标签的块级表格display:table-cell该元素将显示为类似于td和th标签的表格单元格4.div的垂直居中：inline-block说明:为元素设置显示:inline-block配合vertical-align:middletoverticallycenter5.div的垂直居中:marginofabsolutepositioning:auto说明:父元素的相对定位和子元素的绝对定位。子元素上下左右设置0定位并设置margin:auto6,div垂直居中:绝对定位的负值方法说明：知道元素高度后，使用绝对定位设置top到50%，并且merge-top到内容height的负值一半（height+padding）/2；当内容超过元素高度时，需要设置overflow来判断滚动条的外观；top：元素上边界的50%位于包含框的中点，设置负外边界，使元素的垂直中心与包含框的中心重合；7、div的垂直居中：translate的绝对定位说明：CSS3的兴起使得垂直居中有了更好的解决方案，就是用transform代替之前的margin方法。transform中translateoffset的百分比值是Relativetoitsownsize8.div的垂直居中：flex说明：为父元素设置display:flex，然后设置align-items:center表示子元素垂直居中；3.常见问题如何实现背景图片垂直居中？4.解父元素{background-image:url("");background-position:centercenter;//或者写成50%50%;background-repeat:no-repeat;}5.编码实践6.扩展思维使用writing-mode实现垂直居中值：vertical-rl：写法是从右到左in垂直方向。vertical-lr：垂直方向从左到右书写。7.参考文献参考：张新旭博客-垂直居中8.更多讨论垂直居中还有更多的方法吗？
