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

六月初六月初 CSS 2020-08-07 15:57:21

兼容是前端开发中绕不开的一个天坑，那么说到兼容想必大家首先会想到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，使当前元素位于父元素中间。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！