水平居中和垂直居中已經(jīng)單獨(dú)介紹過，本文將介紹水平垂直同時(shí)居中的5種思路

思路一：  text-align + line-height實(shí)現(xiàn)單行文本水平垂直居中

CSS Code復(fù)制內(nèi)容到剪貼板

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>  

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="test" style="background-color: lightblue;width: 200px;">測(cè)試文字</div>   

思路二： text-align + vertical-align

【1】在父元素設(shè)置text-align和vertical-align，并將父元素設(shè)置為table-cell元素，子元素設(shè)置為inline-block元素

CSS Code復(fù)制內(nèi)容到剪貼板

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>  

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="parent" style="background-color: gray; width:200px; height:100px;">  
  <div class="child" style="background-color: lightblue;">測(cè)試文字</div>  
</div>   

【2】若子元素是圖像，可不使用table-cell，而是其父元素用行高替代高度，且字體大小設(shè)為0。子元素本身設(shè)置vertical-align:middle

CSS Code復(fù)制內(nèi)容到剪貼板

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>  

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="parent" style="background-color: gray; width:200px; ">  
  <img class="child" src="http://huoche.7234.cn/images/jb51/xpn0y02dhpx.gif" width="50%" alt="test">  
</div>    

思路三： margin + vertical-align　　

要想在父元素中設(shè)置vertical-align，須設(shè)置為table-cell元素；要想讓margin:0 auto實(shí)現(xiàn)水平居中的塊元素內(nèi)容撐開寬度，須設(shè)置為table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一個(gè)單元格里可以嵌套一個(gè)表格