标签：
① 单行行内文本水平居中line-height
例如:<button style=”width:100px; height:100px; line-height:100px;”>提交</button>
② padding的使用(高自适应)
例如：<div style=”width:100px; padding:30px 0; border:1px solid #F00”>半支烟</div>
2、垂直居中的方法
① 行内文本水平居中text-align:center
例如：<p style=”text-align:center;”>半支烟！</p>
② margin的使用
例如:<div style=”width:500px; height:300px; border:1px solid #F00”><div style=”width:100px; height:100px; background:#000; margin:0 auto;”></div>
3、水平居中与垂直居中
① 单行行内文本水平垂直居中text-align、line-height
例如：<button style=”width:100px; height:100px; line-height:100px; text-align:center;”>提交</button>
② margin的使用:margin上下的值等于=(外层块元素的高)-(要居中块元素的高)/2
例如：
<div style=”width:500px; height:300px; border:1px solid #F00”>
<div style=”width:100px; height:100px; background:#000; margin:100px auto;”>
</div>
③ display:table-cell、text-align:center、vertical-align:middle的配合使用(IE8以下不支持)(注：父元素不能浮动，否则vertical-align:middle失效)
例如：
<div style=”width:500px;height:300px;border:1px solid #F00;display:table-cell;text-align:center; vertical-align:middle;”>
<div style=”width:100px;height:100px;background:#000;display:inline-block;”></div>
</div>
4、使用绝对定位与相对定位
例如：
<div style=”width:500px;height:300px;border:1px solid #F00; position:relative;”>
<div style=”width:100px;height:100px;background:#000;position:absolute; left:200px; height:200px;”></style>
</div>
标签：
原文地址：http://www.cnblogs.com/banzhiyan304053078/p/5390462.html
