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”*/
}