css 文字和div垂直居中方法彙總
在樣式佈局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單：對文字，只需要對其父級元素設定text-align: center;，而對div等塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要通過別的方法去實現元素的垂直居中，下面我總結了幾種了常用垂直居中方法。
單行文字垂直居中
對於單行文字，我們只需要將文字行高(line-height)和所在區域高度(height)設為一致即可：
<!--html程式碼-->
<div id="div1">
這是單行文字垂直居中
</div>
/*css程式碼*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*設定line-height與父級元素的height相等*/
text-align: center; /*設定文字水平居中*/
overflow: hidden; /*防止內容超出容器或者產生自動換行*/
} 
多行文字垂直居中
多行文字垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。
父級元素高度不固定
父級高度不固定的時，高度只能通過內部文字來撐開。這樣，我們可以通過設定內填充（padding）的值來使文字看起來垂直居中，只需設定padding-top和padding-bottom的值相等：
<!--html程式碼-->
<div id="div1">
這是多行文字垂直居中，
這是多行文字垂直居中，
這是多行文字垂直居中，
這是多行文字垂直居中。
</div 
父級元素高度固定
本文一開始就提到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，結合display: table;，可以使得div模擬table屬性。因此我們可以設定父級div的display屬性：display: table;；然後再新增一個div包含文字內容，設定其display:table-cell;和vertical-align:middle;。具體程式碼如下：
<!--html程式碼-->
<div id="outer">
<div id="middle">
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中。
</div>
</div>
/*css程式碼*/
#outer{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid red;
display: table;
}
#middle{
display:table-cell;
vertical-align:middle;
text-align: center; /*設定文字水平居中*/
width:100%;
}
但是，在IE7中顯示效果如下：
這是因為IE7及以下的版本並不能很好的支援display:table和display:table-cell屬性，當然，如果你不考慮IE7以下的版本的瀏覽器，上述方法是可以實現垂直居中。如果把IE7及以下版本考慮進去，我們可以通過用到CSS hack的知識來設定針對不同瀏覽器的屬性。
<!--html程式碼-->
<div id="outer">
<div id="middle">
<div id="content">
這是固定高度多行文字垂直居中(相容IE7)，
這是固定高度多行文字垂直居中(相容IE7)，
這是固定高度多行文字垂直居中(相容IE7)，
這是固定高度多行文字垂直居中(相容IE7)。
</div>
</div>
</div>
/*css程式碼*/
#outer{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid red;
display: table;
*position:relative; //相容IE7及以下版本
}
#middle{
display:table-cell;
vertical-align:middle;
text-align: center; /*設定文字水平居中*/
width:100%;
*position:absolute; //相容IE7及以下版本
*top:50%;
}
#content {
*position:relative; //相容IE7及以下版本
*top:-50%;
}子div垂直居中
1、根據子div具體大小設定偏移
如果子div固定大小，設定水平和垂直偏移父元素的50%，再根據實際長度將子元素向上和向左挪回一半大小
<!--html程式碼-->
<div id="outer">
<div id="middle">
子div(固定大小)垂直居中
</div>
</div>
/*css程式碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
position: relative;
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
該方法相容IE7、IE6，但是隻針對子div大小的固定的情況下才有效。大部分時候，子div的大小是不固定的，下面介紹子div大小不固定時的方法。由於顯示效果與這個效果基本一樣，效果圖就不一一貼出來，讀者可以自行復制程式碼驗證。
2、利用translate
針對第一種方法中水平和垂直偏移父元素的50%後，不設定margin值，而是利用除css3中的transform屬性設定translate的值，css程式碼部分改成如下：
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}這種方法需要注意transform是css3中的屬性，使用時注意瀏覽器的相容性，IE9之前的版本不支援。
3、利用絕對佈局absolute
<!--html程式碼-->
<div id="outer">
<div id="middle">
利用絕對定位實現子div大小不固定垂直居中
</div>
</div>
/*css程式碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
position: relative;
}
#middle{
background-color: #E41627;
width: 100px; //子div大小可隨意設定
height: 100px;
margin: auto;
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
}該方法不相容IE7、IE6
4、利用vertical-align
<!--html程式碼-->
<div id="outer">
<div id="middle">
利用vertical-align屬性實現子div大小不固定垂直居中
</div>
</div>
/*css程式碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: 0 auto;
}這種方法是將div轉變成table-cell顯示，然後通過vertical-align: middle;再設定其子元素垂直居中，這種方法和上面設定父級元素高度固定時多行文字居中的方法一樣，所以這種方法也不能相容IE7、IE6。如果需要相容IE7、IE6，可以參照上面的程式碼，上面設定父級元素高度固定時多行文字居中的方法其實就是將最裡面的div垂直居中。這裡我就不重述了。
5、利用display: flex
<!--html程式碼-->
<div id="outer">
<div id="middle">
利用display: flex實現子div大小不固定垂直居中
</div>
</div>
/*css程式碼*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: flex;
justify-content: center;/*實現水平居中*/
align-items:center; /*實現垂直居中*/
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
}這種方法只需要在父級div中加上這三句話就行，但是在IE中相容性不好，IE9及以下IE瀏覽器版本都不支援。
以上是我總結的一些常用到的垂直居中的設計方法，大家可以根據自己的需要選擇合適的設計方式。