绝对定位元素的居中实现
.element { width: 600px; height: 400px; position: aboslute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */}
代码两个关键点:
0
位置定位;margin: auto
于是,就居中了。上面代码的width: 600px
?height: 400px
仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~
?
对了,该方法IE8+以及其他浏览器都是OK的。