css垂直居中怎么设置，CSS垂直居中的8种方法

对于css垂直居中怎么设置，CSS垂直居中的8种方法，很多网友还不是很明白，今天艾巴小编收集了这方面的知识，就将其分享出来。

通过vertical-align: middle实现CSS垂直居中。Vertical-align:middle是垂直居中CSS最常用的方法，但是有一点需要特别注意。vertical生效的先决条件是display: inline-block of elements。

2.通过display:flex实现CSS垂直居中。随着越来越多的浏览器兼容CSS中的flexbox特性，通过“display:flex”将CSS水平居中的方案也越来越流行。通过display:flex实现CSS垂直居中的方式是给父元素display:flex；以及子元素align-self:center；这和CSS水平居中的原理是一样的，只是在flex-direction上有所不同，一个是row(默认值)，一个是column。

3. CSS通过伪元素：before垂直居中。具体做法是在父元素上添加一个伪元素：before，这样子元素就可以垂直居中。CSS通过display:table-cell垂直居中。给父元素display:table和子元素display: table-cell实现CSS垂直居中。

通过隐藏节点使CSS垂直居中。创建一个隐藏节点#hide，使隐藏节点的高度值为剩余高度的一半。这种方法也适用于CSS的水平居中，原理相同。

6.已知父元素的高度通过transform在CSS中垂直居中。给出位置：子元素的相对位置，然后通过translateY将其定位在垂直中心。

7.未知父元素的高度通过变换实现CSS垂直居中。先给父元素位置：相对，再给子元素位置：绝对，可以通过translateY定位垂直居中的位置

8. CSS通过line-height垂直居中。将子元素的行高值设置为等于父元素的高度。此方法适用于子元素是单行文本的情况。

操作方法：

前三种方法是最浏览器友好的，尤其是第一种1、3。其他的或多或少都会有一些浏览器兼容问题。

以上知识分享到此为止，希望能够帮助到大家！