不定高度实现垂直居中（兼容低版本ie）

标签：

css实现垂直居中的方法比较多，但是每种方法的缺陷也很明显，我尝试对其中一种方法进行了改良

先看原方法:

<div class="parent">

　　　<div class="child"></div>

</div>

.parent{

　　width:500px;

　　height:500px;

　　position:relative;

}

.child{

　　width:100px;

　　height:100px;

　　position:absolute;

　　top:50%;

　　margin-top:-50px;

}

这种方法大家应该都了解，它有一个致命缺点：必须知道child的高度。

但是仔细想下，定位后需要调整的距离正好是child高度的一半，所以有没有办法用50%来代替距离呢?这样就可以无视高度

新方法登场：

<div class="parent">

　　　<div class="wrapper">

　　　　　　<div class="child"></div>

　　　</div>

</div>

.parent{

　　width:500px;

　　height:500px;

　　position:relative;

}

.wrapper{

　　position:absolute;

　　top:50%;

}

.child{

　　width:100px;

　　height:100px;

　　margin-top:-50%;

}

新方法在child外部加了一层wrapper，先对wrapper进行绝对定位，再通过child来调整距离。由于wrapper的高度是被child撑开的，所以child设置margin-top:-50%就相当于上移了自己高度的一半

此时无需知道child的高度便能实现垂直居中

 测试了下，在ie5上也可实现，兼容各版本ie

（第一次写博客，有错误之处欢迎大家指出）

不定高度实现垂直居中（兼容低版本ie）

标签：

原文地址：http://www.cnblogs.com/xuJianH/p/5364887.html