绝对定位元素的居中实现

如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。

margin:auto实现绝对定位元素的居中

首先，我们来看下CSS代码：

.element {   
    width: 600px; height: 400px;   
    position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0;   
    margin: auto;    /* 有了这个就自动居中了 */  
} 

代码两个关键点：

上下左右均0位置定位；
margin: auto

于是，就居中了。上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。

镭拓科技专注于广州网站建设、广州网站制作、广州网站设计、广州网页设计、企业网站建设、展示型网站建设、外贸网站建设的广州网站建设公司，服务热线：020-82562426。