CSS之垂直居中

css里面用text-align:center加上margin:0 auto就可以实现水平居中了。
但是垂直居中却没有相应的css属性来设置。

方法一：通过 display:table 实现CSS垂直居中
而如果要设置元素能够垂直居中必须得将容器设置为display:table，
然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

方法二：通过 position + transform 实现CSS垂直居中
下面的代码利用css3的transform来实现垂直居中和水平居中：

注意：

1、父元素的 height 属性必须指定像素值
垂直居中元素的父元素的高度必须是一个固定值，例如：height: 60px; 。不能是auto，或是没有指定，或者是position为absolute时，高度设置为100%，这样高度仍然是0。此时，top 的 50%，仍然是0，就不起作用。

2、父元素除了 position 为 relative 外，无需其它修饰。
例如：不要加：text-align: center; 之类的修饰。


垂直居中

.center-y {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

水平居中

.center-x {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

水平且垂直居中

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

解释：
top：50%，当position设置为 relative 或 absolute 时，指元素的顶部到父元素的顶部的距离是父元素高度的一半。（所以父元素的高度不能为0，或可能引起父元素高度为0的任何CSS属性）此时并未垂直居中，因为元素本身也是有高度的。
transform: translateY(-50%)，是指在垂直方向，向上移动元素自身高度的一半。

这两个属性结合使用，就可以达到使元素在父元素中垂直居中。


方法三：通过 display:flex 实现CSS垂直居中

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

.parent {
    display:flex;
}
.child {
    align-self: center;
}

引用请注明，
原文出处：https://www.iteye.com/blog/lixh1986-2513366



























ref：
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

https://blog.csdn.net/qq_33769914/article/details/97786549
https://www.cnblogs.com/clj2017/p/9293363.html

-