CSS代码实现水平垂直居中

最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便，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只是将元素下面的内联元素居中显示

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（内填充，不用多说）

.wrap{

width:200px;

border:1px solid red;

padding:50px 0;

}