在一次次筆試，一次次的面試中，問到垂直居中的問題太多太多，但是我每一次回答，都好像都不能讓面試官太滿意，今天特意花點時間，整理一下css垂直居中問題。
1、如果是單行文本。看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
line-height: 500px;//行高=父級的height，垂直居中。
text-align: center;//水平居中
}
</style>
</head>
<body>
<div id="wrapper">
<p>這是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>
效果如圖：
說明：適用於單行文本，多行就不可以了！
2、對於已知高度的塊級元素，可以采用絕對定位。看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative;//父級
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
position: absolute;//子級用絕對定位
top:50%;//先定位到50%的位置
height: 300px;//已知的高度
margin-top: -150px;//往上提本身高度的一半
}
</style>
</head>
<body>
<div id="wrapper">
<p>這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>
效果如圖:
適用：絕對定位為頁面布局沒有影響的情況下可以使用，並且子級的高度是已知的。
3、對於已知子級元素的高度，而且不能用絕對定位來布局的情況，看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
background: gray;
width: 500px;
height: 500px;
text-align: center;
overflow: hidden;
}
#null{
width: 100%;
height: 50%;
background: yellow;
}
#content {
height: 100px;
margin: -50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="null"></div>
<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div>
</body>
</html>
效果如圖：
適用：對於絕對布局有影響，不能適用position:absolute的元素，可以用以上這種方法，思路是：用一個塊級元素，設置已知大小，在讓其高度達到父級容器的一半大小，再把要居中的元素往上提半個高度。跟方法2同理。
4、垂直居中一張圖片（行內元素）。看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
}
#wrapper img{
vertical-align: middle;
}
#wrapper #block{
background: blue;
height: 100%;
width: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
<img id="block">
</div>
</body>
</html>
效果如圖：
看到這里，細心的同學可能會發現：
這里的多了一個空的<img>標簽，為什么要這樣的，首先，要搞清楚vertical-align這個屬性的特點，它是相對兄弟級行高（line-height）來定位，它是相對兄弟級行高（line-height）來定位，它是相對兄弟級行高（line-height）來定位（重要事情說三遍），並且他僅對行內元素有效，所以，在要定位的元素后面加多一個行內元素img來撐開父級的行高，以此來居中。然后必須強調你一點，記得把后面img的src=""這個空屬性去掉，不然會留下一個空白框。如圖：
然后，有些同學可能會有疑問，行內元素那么多。為什么你要用<img>標簽呢！？
嗯嗯，也可以用其他行內元素，這里我用<span>來試一試給大家看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
}
#wrapper img{
vertical-align: middle;
}
#wrapper #block{
background: blue;
line-height: 800px;//跟父級一樣高
}
</style>
</head>
<body>
<div id="wrapper">
<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
<span id="block"></span>
</div>
</body>
</html>
這樣的效果是一樣的，記得哦，在這里不可以用line-height:100%這樣來設置行高，詳情可以查看我的另外一個博客“line-height:150%和line-height:1.5的區別”，了解一下line-height用百分比的特性。
適用：通用行內元素。
5、子父級都未知高度的塊級元素居中，看代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
display: table;
background: gray;
width: 500px;
height: 500px;
text-align: center;
}
#content {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div>
</body>
</html>
效果如圖：
適用：低版本的IE67不兼容，還有就是即便父級overflow：hidden,隨着文本的增加，溢出的文本依舊不會隱藏，適用於少文字或者靜態文字。
6、絕對定位居中法，看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative;
background: gray;
width: 800px;
height: 800px;
}
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="content" src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
</div>
</body>
</html>
效果如圖：
首先，先感謝一下評論下方的@ 唯利是圖 園友，感謝他的提醒。我嘗試了這種絕對定位的方法，果然很好用。但是其原理是什么呢？
在這里，我先說一下這種定位方法的優點，可以無視被居中元素的寬度和高度，從而實現絕對定位的居中。我們來看看里面的代碼，
這是什么意思呢？
其實就是將元素未知的寬度高度的元素，使其讓它的top,bottom,left,right,都與父級的距離為零，如果其元素寬高不夠的，就會用margin:auto去填充其大小。
從而實現了居中。
（這是本人的粗略理解，不一定准確!）
文章說明：個人查看各種資料，原創所得，觀點不一定准確，歡迎各路大牛勘誤，小女子感激不盡。