最近有人問我怎么設置元素垂直居中？我....（這么基礎的東西都不會？我有點說不出話來）， 不過還是耐心的教了他幾個方法，好吧教完他們，順便把這些方法整理一下
第一種：通過設置成為表格元素的方式來實現垂直居中 （適應於父級有固定高度的元素）
第一步，寫html代碼，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>元素垂直居中</title>
</head>
<body>
<div class="box">
<div class="box-con">
<div class="content">
a001
</div>
</div>
</div>
</body>
</html>
第二步：設置css
1. 將父元素設置為表格元素： display: table;
2.將子元素設置為父元素表格的單元格： display: table-cell; 然后設置垂直居中：vertical-align: middle;
3.將內容水平居中 margin:0 uato; 這樣就可以垂直和水平都居中了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>元素垂直居中</title>
<style type="text/css">
.box{
width:80%;
height:500px;
padding:100px 0;
margin:0 auto;
background-color: #e4963c;
display: table; /*將父級元素設置成為一個塊級表格元素*/
}
.box-con{
display: table-cell; /*將子元素設置成為父元素表格的單元格*/
vertical-align: middle; /*該屬性設置元素內容的垂直對齊方式。*/
}
.content{
width:50%;
margin:0 auto;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<div class="box-con">
<div class="content"> //注：content 就是表格的內容，所以其實設置的就是這個div居中，去掉這個div,直接寫內容也是直接將內容居中的
a001
</div>
</div>
</div>
</body>
</html>
注意：有時候會出現上邊距比下邊距多的問題，這樣的話再父級設置font-size:0; 然后重新給內容設置font-size（因為父級設置了font-size:0;所以內容一定要設置了font-size才能正常顯示）
效果圖：（這個效果圖不是這個代碼出來的效果圖，但是是一樣的寫法出來的效果圖，這里多了一個內容002, 寫來做對比用的）
第二種方法：通過改變布局的方式來實現
1. 給父級元素設置 display: flex; 設置為fiex布局 然后：align-items: center; 設置該元素的內容垂直居中
2.子級元素設置margin:0 auto; 水平居中
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>元素垂直居中</title>
<style type="text/css">
.box{
width:80%;
height:400px;
background-color: #d65412;
margin:0 auto;
display: flex; //將元素設置為fiex布局
align-items: center; //設置元素的內容垂直居中
justify-content:center; /*將元素內容設置為水平居中*/ /*也可以在子元素中設置margin:0 auto;來水平居中*/
}
.content{
width:50%;
background-color: #ffaf0f;
/* margin:0 auto; */ //設置元素水平居中
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
a001a
</div>
</div>
</body>
</html>
效果圖：
第三種方法，通過設置margin 或 padding 來實現 這個方法處理垂直居中是最靈活的，並且不用父級元素設置固定高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>垂直居中</title>
<style type="text/css">
.box{
width:85%;
background-color: #e4963c;
margin:0 auto;
padding:100px 0; //通過給父級元素設置padding的方式來實現垂直居中
}
.boxs{
width:20%;
background-color: #f00;
margin:0 auto; //設置元素水平居中
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="boxs">
a000
</div>
</div>
</body>
</html>
效果：
毫無疑問這個方法是做好的方法，簡單方便，並且沒有父級高度限制，根據子級內容自動撐開不管什么時候都保持在父級元素中
當然還可以通過設置子級元素的外邊距來實現，效果一樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>垂直居中</title>
<style type="text/css">
.box{
width:85%;
background-color: #e4963c;
margin:0 auto;
/*padding:100px 0;*/
overflow: hidden; //因為直接在子級元素設置margin會導致出現邊距合並問題，所以加上overflow: hidden;是為了解決邊距合並問題，讓子元素的margin生效。
}
.boxs{
width:20%;
background-color: #f00;
margin:100px auto; //設置上下邊距一樣，也就相當於對於父級元素垂直居中了
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="boxs">
a000
</div>
</div>
</body>
</html>
第四種方法，定位
使用定位來進行居中也是比較常用的，但是還是要設置父級高度的情況下才能使用，不夠靈活。
這里要注意的是設置top:50%; left:50%;是指父級元素的中心點，子級內容從這里開始顯示。
所以需要內容自身向左和向上偏移自身的一半，這樣內容才是真正的居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位設置垂直居中</title>
<style type="text/css">
.box{
width:80%;
height:400px;
margin:0 auto;
background-color: #0f0;
position: relative;
}
.boxa{
width:30%;
background-color: #f00;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="boxa">
a000sd
</div>
</div>
</body>
</html>
效果：
好了，垂直居中就說到這里，還有其他更好的方法也歡迎留言。