一、子元素設置vertical-align: middle;但是有一個前提必須是子元素爲行內元素；並且單獨的設置vertical-align: middle;是無效的；如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer{
width: 100px;
height: 100px;
background: blue;
text-align: center;
}
.Inner{
width: 50%;
height: 50%;
background: yellow;
display: inline-block;
vertical-align: middle;
}
/*.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}*/
</style>
</head>
<body>
<div class="Outer">
<div class="Inner">
</div>
<div class="help"></div>
</div>
</body>
</html>
結果爲：
造成這個原因是因爲子元素中的時候沒有參照點，事實上，一個Box中由很多行很多元素組成，vertical-align只作用於在同一行內的元素，它的垂直並不是相對於整個Box而言的。如果把 vertical-align:middle 放到一個單元格元素，即table的td元素中，它的垂直居中顯示是沒任何問題的，因爲它表示相對於改行的垂直高度居中顯示。
解決的方法就是在子元素下面設置一個空的元素作爲參照點，如上圖的類help標籤，這樣元素就會居中，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer{
width: 100px;
height: 100px;
background: blue;
text-align: center;
}
.Inner{
width: 50%;
height: 50%;
background: yellow;
display: inline-block;
vertical-align: middle;
}
.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="Outer">
<div class="Inner">
</div>
<div class="help"></div>
</div>
</body>
</html>
結果爲：
二、知道父元素和子元素的寬高的情況下，子元素浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer1{
width: 100px;
height: 100px;
background: blue;
overflow: hidden;
}
.Inner1{
width: 50%;
height: 50%;
background: yellow;
margin: 25px 0 0 25px;
float: left;
}
</style>
</head>
<body>
<div class="Outer1">
<div class="Inner1"></div>
</div>
</body>
</html>
，直接設置margin即可；
如下：
三、定位實現：父元素正常，子元素相對定位；這裏有三種方法實現，一種是設置left，top，right，bottom調整位置，一種是根據CSS3的平移調整位置；還有一種是父元素相對定位，子元素絕對定位；
（1）top調整設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer{
width: 100px;
height: 100px;
background: blue;
text-align: center;
}
.Inner{
width: 50%;
height: 50%;
background: yellow;
position: relative;
top: 25%;
}
</style>
</head>
<body>
<div class="Outer">
<div class="Inner">
</div>
</div>
</body>
</html>
結果：
（2）CSS3調整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer{
width: 100px;
height: 100px;
background: blue;
text-align: center;
}
.Inner{
width: 50%;
height: 50%;
background: yellow;
position: relative;
margin: 0 auto;
transform: translateY(50%);
}
</style>
</head>
<body>
<div class="Outer">
<div class="Inner">
</div>
</div>
</body>
</html>
結果：
（3）父元素和子元素都進行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.Inner1{
width: 50%;
height: 50%;
background: yellow;
position: absolute;
top: 25px;
left: 25px;
}
</style>
</head>
<body>
<div class="Outer1">
<div class="Inner1"></div>
</div>
</body>
</html>
結果：
四、flex佈局
flex佈局是父元素實現flex佈局，使得父元素得內容進行垂直居中從而達到效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.Outer2{
width: 100px;
height: 100px;
background: blue;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.Inner2{
width: 50%;
height: 50%;
background: yellow;
}
</style>
</head>
<body>
<div class="Outer2">
<div class="Inner2"></div>
</div>
</body>
</html>
結果如下：