css居中方式总结

方法一: line-height

<div class="vertical" style="width:200px;height:200px;border:2px solid #999">居中显示</div>

.vertical {
  line-height:200px;//这里将跟height一样        
}

　　

方法二：position定位方式

　给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）

<div class="vertical">居中显示</div>

.vertical {
 height: 100px;
 position: absolute; 
 top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ 
 margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/         
}

 

方法三：让div模拟表格效果

<div id="container"> 
<div id="content">content</div> 
</div> 

#container { 
height: 300px; 
display: table;/*让元素以表格形式渲染*/ 
} 
#content { 
display:table-cell;/*让元素以表格的单元素格形式渲染*/ 
vertical-align: middle;/*使用元素的垂直对齐*/ 
} 

　　

方法四： 给出上下一样的padding值 

<div class="columns"> 
<div class="item">test</div> 
</div> 

.item {padding-top:30px;padding-bottom:30px;} 

　　

方法五:margin: 0 auto实现水平居中

满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果

 

<div class="horizontal">content</div>

.horizontal { 
width: 200px; 
margin: 0 auto; 
}  

 想要使用这种类似的方式实现垂直居中是不行的，只能用于水平居中

 

方法六: 使用绝对定位配合负的margin实现水平居中

<div class="horizontal">content</div> 

.horizontal { 
width: 960px; 
position: absolute; 
left: 50%; 
margin-left: -480px;/*此值等于“-width/2”*/ 
}