我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……今天李坏为大家推荐一种方法,让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到:

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

1.使用上面的方法实现居中效果有以下优点:

go site (1)跨浏览器,兼容性好(可兼顾IE8~IE10)
(2)无特殊标记,样式更精简
(3)自适应布局,可以使用百分比和最大最小高宽等样式
(4)居中时不考虑元素的padding值(也不需要使用box-sizing样式)
(5)布局块可以自由调节大小
(6)img的图像也可以使用

2.需要注意的问题:

(1)必须声明元素高度
(2)推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
(3)这种方法在Windows Phone上不起作用

      居中样式在实际开发中还是比较常用的,希望能对大家有所帮助。

 相关文章
【技术交流,欢迎大家拍砖】

  1. 我爱刘德华 说道:

    很实用,收藏了!!!