1、height + line-height
这个是大家最熟悉的垂直居中的方式（之一），但是这种方法只能用于单行文本。
2、line-height + line-block
这种方法是将多行文本当成一行文本对待，即在文本的外层包一层div，然后将其设置为inline-block，然后再将这个div外层的容器，用line-height代替height即可。
<div class="outer">
<div class="inner">
多行文字居中 <br />
多行文字居中 <br />
</div>
</div>
.outer {
width: 400px;
* line-height: 200px;
background: #ddd;
}
.inner {
* display: inline-block;
* line-height: 1;
background: #aaa;
}
我在起到居中效果的代码前面加上了
*用于标注，下同！
效果如下：
缺点：需要手动设置line-height的大小，居中效果并不是很好。
3、absolute + margin负值
这种方法需要手动设置文本元素的高度，然后将其绝对定位设置为 top: 50% 之后，再设置margin-top: -1/2文本高度。注意这里只要让margin-top的值始终是1/2文本高度即可，用什么单位不限（px，% ，…）。
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* position: relative;
width: 500px;
height: 200px;
background: #ddd;
}
.inner {
* position: absolute;
* top: 50%;
* height: 80px; /* 这里px可以换成其他单位 */
* margin-top: -40px; /* 这里px可以换成其他单位 */
background: #aaa;
}
缺点：需要手动设置文本元素的height和 margin-top 的值。
4、absolute + margin: auto
当元素设置为position: absolute之后，margin: auto 就会失效。但是当同时设置 top 和 bottom时，又会生效。多么神奇鸭~ 所以这里只需要将 top 和 bottom 设置为一个相等的值，就能让文本垂直居中了。同理，left 和 right 设置为相等的值，也会让其水平居中。
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* position: relative;
width: 500px;
height: 300px;
background: #ddd;
}
.inner {
* position: absolute;
* top: 0;
* bottom: 0;
* left: 0;
* right: 0;
* height: 80px;
* margin: auto;
background: #aaa;
}
效果图如下：
这个方法的小缺点就是：需要手动设置下文本的height。
5、::before + inline-block + vertical-align: middel （推荐）
这种方法将::before伪元素设定为height: 100%、inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了。
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
width: 500px;
height: 300px;
background: #ddd;
}
.outer::before {
content: '';
* display: inline-block;
* height: 100%;
* vertical-align: middle;
}
.inner {
* display: inline-block;
* vertical-align: middle;
background: #aaa;
}
效果如下：
优点： 可适应外层容器的任意高度。
不过这种方法可能不太好理解，但掌握之后是很简单好用的~
6、absolute + translate （推荐）
transform 中的 translate 是相对于元素自身偏移的，所以将 top: 50% 的绝对定位元素，相对自身向上偏移50%即可。
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* position: relative;
width: 300px;
height: 300px;
background: #ccc;
}
.inner {
* position: absolute;
* top: 50%;
* transform: translate(0, -50%);
background: #aaa;
}
效果图如下：
优点： 可适应外层容器的任意高度。简单，容易理解。
7、利用 Flex 或 Grid 布局
利用这两个布局有很多使元素垂直居中的方法，这里简单说三种：
- Flex / Grid + align-items
- Flex / Grid + align-self: center
- Flex / Grid + margin: auto
1、Flex / Grid + align-items
<div class="content">
<p>
多行文本垂直居中
多行文本垂直居中
多行文本垂直居中
多行文本垂直居中
多行文本垂直居中
多行文本垂直居中
</p>
</div>
.content {
* display: flex;
width: 300px;
height: 300px;
* align-items: center;
background: #ddd;
}
效果图如下：
2、Flex / Grid + align-self: center
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* display: flex;
width: 300px;
height: 300px;
background: #ddd;
}
.inner {
* align-self: center
}
效果图如下：
3、Flex / Grid + margin: auto
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* display: flex;
width: 300px;
height: 300px;
background: #ddd;
}
.inner {
* margin: auto;
}
效果图如下：
买一送一？水平也给居中啦~
最后说一种不太常用，但效果又很好的方法：
8、display: table-cell + vertical-align: middle
<div class="outer">
<div class="inner">
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
<p>多行文字垂直居中</p>
</div>
</div>
.outer {
* display: table-cell;
width: 300px;
height: 300px;
* vertical-align: middle;
background: #ddd;
}
.inner {
background: #aaa;
}
效果图如下：
垂直居中的方法还有很多，不过这几种相对容易且好用~
就这些~
END!
参考文章：