CSS佈局——讓一個div垂直居中，8種實用的方法
1、height + line-height
這個是大家最熟悉的垂直居中的方式（之一），但是這種方法只能用於單行文字。
2、line-height + line-block
這種方法是將多行文本當成一行文字對待，即在文字的外層包一層div，然後將其設定為inline-block，然後再將這個div外層的容器，用line-height代替height即可。
<div class="outer">
<div class="inner">
多行文字居中 <br />
多行文字居中 <br .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 缺點：需要手動設定文字元素的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!
參考文章：