1.文字或者内联元素的垂直水平居中对齐
css属性 -- 水平居中：text-aligin:center; 垂直居中： line-height:height; 例子:、
html：
<div class="mb10 line-align">
我是垂直水平居中对齐的文字哦！
</div>
<div class="mb10 line-align">
<span>我是垂直水平居中对齐的内联元素span！</span>
</div>
css：
.mb10 {
margin-bottom: 10px;
}
/*文字或者内联元素的垂直水平居中对齐*/
.line-align {
height: 40px;
line-height: 40px;
text-align: center;
background: tan;
}
2.块元素的垂直水平居中对齐
1) 定位法
优点：方便理解。一目了然。
缺点：子元素必须固定宽高才可以使用。
html：
<div class="relativeDiv">
<div class="absoluteDiv"></div>
</div>
css：
/*定位法*/
.relativeDiv {
height: 100px;
background: tomato;
position: relative;
}
.absoluteDiv {
height: 20px;
width: 100px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -10px;
}
2) css3 transform结合position方法
优点：相比完全的定位法，这个方法中，子元素不比固定宽高。
缺点：兼容性不是很好，ie9+的浏览器才支持。
html：
<div class="transform">
<div class="transformChild"></div>
</div>
css：
/*css3 transform*/
.transform{
height: 100px;
background: green;
position: relative;
}
.transformChild{
width: 100px;
height: 20px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
3. 变身table属性法
1) td中放span或者文字
html:
<div class="mb10 displayTable">
<div class="displayTableCell">
<span>我相当于是td中的span</span>
</div>
</div>
2) td中放div
html:
<div class="mb10 displayTable">
<div class="displayTableCell">
<div class="tableDiv">我相当于是td中的div</div>
</div>
</div>
css:
.displayTable{
display: table;
width: 100%;
}
.displayTableCell{
width: 100%;
height: 100px;
display:table-cell;
background: palegoldenrod;
vertical-align: middle;
text-align: center;
}
.tableDiv{
width: 200px;
height: 30px;
background: #000;
color: #fff;
margin: 0 auto;
}
4.图片水平垂直居中！！！很好用的方式
图片的水平处置居中都可以使用上面的方式，不过还有个超级好用的方式，padding+伪类方法。
缺点：只支持ie9+
例子：
html：
<div class="imgGroup">
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/1.png">
</div>
</div>
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/2.png">
</div>
</div>
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/1.png">
</div>
</div>
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/2.png">
</div>
</div>
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/1.png">
</div>
</div>
<div class="imgAlone">
<div class="imgWidth">
<img src="data:image/2.png">
</div>
</div>
</div>
css：
<style type="text/css">
.imgGroup{
width: 100%;
}
.imgAlone{
float: left;
width: 20%;
position: relative;
margin:2.5%;
border: 1px solid #ccc;
box-sizing: border-box;
}
.imgAlone:after{
content: "";
display: block;
padding-top:100%;
}
.imgWidth{
position: absolute;
left:;
top:;
width: 100%;
height: 100%;
}
.imgWidth img{
max-height: 100%;
max-width: 100%;
position: absolute;
top:;
left:;
right:;
bottom:;
margin: auto;
}
</style>