水平居中与垂直居中的几种方法

1、水平居中的方法

① 单行行内文本水平居中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;”></div>

 </div> 

 

 

转载于:https://www.cnblogs.com/banzhiyan304053078/p/5390462.html