CSS绝对定位元素居中的几种方法

html-css014

CSS绝对定位元素居中的几种方法,第1张

css绝对定位，可以用位置来居中。我用一个例子给你说明一下。像通栏的banner，要绝对定位居中的话，可以这样。img相对父级定位，向左偏移50%；再margin-left:-960px（父级宽度的一半）。这是width：100%（1920px）。

.public_banner{ width:100%min-width: 1200pxheight: 500pxoverflow: hidden}

.public_banner img{position:relativetop:0left:50%margin-left:-960px}

不知道这样能不能帮到你，你可以把具体的问题拿出来。

1.兼容性不错的主流用法是：（但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。）

.conter{

width: 600pxheight: 400px

position: absoluteleft: 50%top: 50%

margin-top: -200px /* 高度的一半 */

margin-left: -300px /* 宽度的一半 */

}

2.CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样

.conter{

width: 600pxheight: 400px

position: absoluteleft: 50%top: 50%

transform: translate(-50%, -50%) /* 50%为自身尺寸的一半 */

}

3.margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

.conter{

width: 600pxheight: 400px

position: absoluteleft: 0top: 0right: 0bottom: 0

margin: auto /* 有了这个就自动居中了 */

}

4.使用css3盒模型:flex布局。（不考虑低版本浏览器的情况下）