css 元素垂直,CSS——实现元素的垂直居中

在写CSS的过程中，我常常谷歌一个东西，就是如何实现元素的垂直居中，水平居中难度还不是很大，但是垂直居中我这个烂记性是写一次忘一次，于是本着好记性不如烂笔头的想法，写下一篇博客记录下来。那么今天就记录下三种垂直居中的方法，各位看官按需使用。

通用情况

首先我们先介绍一种通用情况下的垂直居中，这个方法不需要设置自己的高度，也不需要父容器设置高度，利用绝对定位只需要三行代码就能实现。

首先html代码长这个样子

这里的子元素自适应，不设置高度

那么来看css代码如何完成垂直居中：#outter1{    position:relative;    background:black;

}#outter1 .inner1{    display:inline-block;    width:400px;    height:400px;    background:red;

}#outter1 .inner2{    background:blue;    position: absolute;    top: 50%;    transform: translateY(-50%);

}

父容器设置了高度，父容器下只有一个元素的情况

若是父容器设置了高度，父容器里只有一个元素，那么使用相对定位即可完成垂直居中。

html代码:

父亲设置了高度，且只有我一个子元素

css代码:#outter2{    position:relative;    background:black;    height:400px;

}#outter2 .inner1{    display:inline-block;    width:200px;    height:200px;    background:red;

}#outter2 .inner2{    display:inline-block;    background:blue;    position: relative;    top: 50%;    transform: translateY(-50%);

}

Flex布局搞定垂直居中

如果不用考虑老式浏览器兼容的话，直接用flex布局来搞定就是非常简单的了，三行代码搞定垂直居中。

子元素1

子元素2

子元素3

#outter3.inner1 {  display:flex;  display: -webkit-flex;  align-items:center;

}

这就是三种CSS里垂直居中的方法了，希望写下这篇文章的我，在遇到垂直居中的问题时，再也不用谷歌了。

作者：Originalee

链接：https://www.jianshu.com/p/f4e198728e3b