未知宽高元素水平垂直居中方法

<div class="father" >

<div class="son">

这里的内容永远相对父元素居中

</div>

</div>

第一种（未知宽高元素水平居中）

.son{

display:table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,采用最小的宽度.不是默认全宽*/margin:0auto;

}

这种方式对于垂直居中还是不能实现

第二种（需要父元素确定宽高的子元素居中）

.father {

display:table-cell; 

width:300px;

 height:300px; 

text-align:center; 

vertical-align:middle; 

background:rgba(0,0,0,0.5);

}

.son {

background:red; 

display:inline-block;

}

该方法对于已经确定父元素的宽高的居中很有效，但是对于父元素宽高是百分比设置的则无效

第三种（借助废弃元素b实现完美居中）

<div class="father">

<b class="b"></b>

<div class="test">居中元素</div>

</div>

样式

.father {width:100%; height:100%; text-align:center; }

.b {display:inline-block; width:0px; height:100%; vertical-align:middle;}

.son {background:red; display:inline-block;}

该方法完美解决各种问题，是本人最常用的方式