網頁布局中，元素水平居中比垂直居中簡單不少，同時實現水平垂直居中也不難，難的是想出多種實現水平垂直居中的方法并從中挑選最合適最容易理解的那一個完成我們的項目。
現在是響應式設計的時代，大多數情況下我們并不知道用戶瀏覽器尺寸，也沒有辦法計算元素準確的寬高等，所以將寬高等屬性值固定為某個具體的px不可行。
以下是實現元素居中的幾種實用方法：
1 . line-height大法好
-
單行文本垂直居中
如果一個標簽沒有定義height屬性，那么其最終表現的告訴一定是由line-height起作用。網上大多說把line-height值設置為height一樣的可實現單行文字的垂直居中。這句話確實是正確的，但這個height是多余的。
示例代碼：為了方便大家看，我給body加了一個邊框。
<style>
body{
border: 10px solid black;
}
p {
line-height: 50px;
background: red;
}
</style>
<body>
<p>單行文本垂直居中</p>
</body>
效果圖1-1
-
多行文本垂直居中
（1）對于高度不固定的文本，設置文本垂直居中直接使用padding就行。
效果圖1-2-1
（2）對于高度固定的文本，里面的文字單行或多行顯示，字體有大有小，要怎么實現垂直居中呢？
<style>
p {
line-height: 400px;
border: 10px solid black;
}
span {
background: red;
display: inline-block;
line-height: 1.4em;
vertical-align: middle;
}
i{
width: 0;
display: inline-block;
vertical-align: middle;
font-size: 0;
}
</style>
<p>
<span>多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，<br />
多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，<br />多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，
多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，</span><i> </i>
</p>
效果圖1-2-2
去掉i元素，得到的效果也是相同的，所以這里有一點疑惑，先mark一下，待日后弄懂了回來補充。
- 一張圖片水平垂直居中
<style>
p {
border: 10px solid black;
line-height: 400px;
text-align: center;
}
img {
vertical-align: middle;
}
</style>
<p>
</p>
效果圖1-3-1
<style>
a {
border: 10px solid black;
display: inline-block;
text-align: center;
vertical-align: middle;
}
img {
vertical-align: middle;
padding: 10px;
margin: 10px;
}
</style>
<a href="">
</a>
效果圖3-1-2
- 多圖水平垂直居中（題外話，與line-height無關）
html代碼：
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
CSS代碼：
p {
background: yellow;
width: 1em;
height: 1em;
padding: 0.1em;
margin: 0.1em;
font-size: 280px;
float: left;
}
img {
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
效果圖
2 . text-align: center; ——給行內元素的父元素設置此樣式使得行內元素水平垂直居中
<style>
p {
border: 10px solid black;
text-align: center;
}
</style>
<p>
<span>這是一段文本</span>
</p>
效果圖2
3 . 塊級元素水平居中margin: 0 auto;
<style>
p {
border: 10px solid black;
}
img {
display: block;
width: 33%;
margin: 0 auto;
}
</style>
<p>
</p>
效果圖3
4 . position & translate——絕對定位 & 偏移 實現水平垂直居中。
- 絕對定位元素的水平垂直居中
關鍵點：上下左右皆為0，margin為auto。
<style>
div{
border: 10px solid black;
width: 600px;
height: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<div></div>
效果圖4-1
- 絕對定位元素的水平垂直居中-偏移法：
關鍵點：left和top相對父元素，translate相對于自身。
<style>
p{
position: absolute;
background: red;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<p></p>
效果圖4-2
5 . display: table-cell;
關鍵點：需要添加額外元素作為外部容器,需要實現垂直居中的元素與其父元素都要設置vertical-align: middle;不然不能實現垂直居中。
<style>
* {
padding: 0;
margin: 0;
}
.center-aligned{
display: table;
background: #00a0ea;
width: 100%;
height: 300px;
}
.center-core{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center-core img{
width: 40%;
vertical-align: middle;
height: auto;
}
</style>
<div class="center-aligned">
<div class="center-core">
</div>
</div>
效果圖6
6 . display: flex;模型實現水平垂直居中
關鍵點：容器獲得display:flex;屬性，其他所有特性定義也都在容器元素內進行。
html代碼如下：
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
設置基礎樣式：
* {
padding: 0;
margin: 0;
}
#item-container {
display: flex;
background: yellow;
}
.circle {
background: black;
width: 100px;
height: 100px;
border-radius: 50%;
}
.square {
background: #cdcdcd;
width: 150px;
height: 150px;
}
效果圖6-1
水平居中：
#item-container {
justify-content: center;
}
效果圖6-2
兩端對齊：（玩一下）
#item-container {
justify-content: space-between;
}
效果圖6-3
垂直居中：
#item-container {
align-items: center;
heigh: 200px;
}
效果圖6-4
7 . calc()——適合內容寬高為固定尺寸的場景
關鍵點：top: 50%;left: 50%只是將p的左上角移到了div的中心點，要實現兩個中心點重合，需要得到p自身寬高的一半。
<style>
* {
padding: 0;
margin: 0;
}
div {
background: green;
position: relative;
min-height: 400px;
}
p {
background: red;
position: absolute;
width: 200px;
height: 200px;
top: calc(50% - 200px/2);
left: calc(50% - 200px/2);
}
</style>
<div>
<p>
</p>
</div>
效果圖7
參考資料：
