ie8下未知高度div在固定div中垂直居中

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

兼容是前端开发中绕不开的一个天坑,那么说到兼容想必大家首先会想到IE,是否只有经过IE的毒打,才能理解出其余浏览器的友好呢?

本文就兼容IE8中一个未知高度的div垂直居中在div解决方案,效果如下:


关键属性:table-cell、vertical-align

先上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
height: 300px;
width:600px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
.child{
border: 1px solid #f00;
display: block;
margin: 0 auto;
width: 140px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">六月初博客站</div>
</div>
</body>
</html>

原理解析:display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。看到这个是不是让你立马想起table的独特属性,无论任何元素,插入td中都会垂直居中。那么这个其实也就是将div赋予td相同的属性,当然这其中自然少不了vertical-align: middle,使当前元素位于父元素中间。