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!
参考文章: