1:使用position:absolute,设置left、top、margin-left、margin-top的属性
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
2:使用position:fixed,同样设置left、top、margin-left、margin-top的属性
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
3:利用position:fixed属性,margin:auto这个必须不要忘记了。
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:pink;
4:利用position:absolute属性,设置top/bottom/right/left
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:black;
5,利用display:table-cell属性使内容垂直居中
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
6最简单的一种使行内元素居中的方法,使用line-height属性
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;原文:http://www.cnblogs.com/zb0916/p/5325959.html