现代主流浏览器,都支持margin:0 auto;
,这样元素就可以实现居中显示。
但是ie8并不支持,这个属性,导致其它浏览器正常,但是ie8得就靠左显示。
怎么兼容ie8 居中
原理: 这其实是inline-block水平居中方案以及table-cell垂直居中方案的合用,也算是把文本排版的特性都利用了个遍了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
网友评论