最近遇到很多居中的問題，就花點時間總結(jié)了一下放在這里，以后找也方便，0.0~~ 

1.居中文本

<div class="wrap">

我在中間……

</div>

1.1. height+line-height+text-center（只能居中單行）

.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center;

    line-height: 200px;

}

ps:text-align:center只是將元素下面的內(nèi)聯(lián)元素居中顯示

1.2display:table-cell(多行固定高度居中)

.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center; 

    display:table-cell; 

    vertical-align: middle;

}

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67下：（以后也不用了，不過也放這兒吧）

方法一：（通過em標簽高度與父級等高，所以span和em居中就相當于span在父級居中）

<div class="wrap">

<span>

我在中間…… 我在中間…… 我在中間…… 我在中間……

</span>

<em></em>

</div>

.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center;

}

.wrap span{

    vertical-align: middle;

    display:inline-block; 

    width:180px;

}

.wrap em{

    height:100%;

    vertical-align: middle; 

    display:inline-block;

}

方法二：（通過給子元素增加一個絕對定位的父級標簽，再配合子元素的相對定位水平垂直居中）

<div class="wrap">

<span class="span1">

<span class="span2">我在中間…… 我在中間…… 我在中間…… 我在中間……</span>

</span>

</div>

.wrap{

    width:200px; 

    height:200px;

    border:1px solid red;

    display:table;

    position:relative; 

    overflow: hidden;

}

.wrap .span1{

    display:table-cell; 

    vertical-align: middle; 

    text-align: center;

    *position:absolute;

    top:50%;

    left:50%;

}

.wrap .span2{

    *position:relative;

    top:-50%;

    left:-50%;

}

1.3padding（內(nèi)填充，不用多說）

.wrap{

width:200px;

border:1px solid red;

padding:50px 0;

}