css绝对定位如何居中

最新推荐文章于 2025-05-25 18:34:15 发布

原创最新推荐文章于 2025-05-25 18:34:15 发布 · 362 阅读

CC 4.0 BY-SA版权

#css3的出现，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样实现css绝对定位居中：
.conter{

width: 600px; height: 400px;

position: absolute; left: 50%; top: 50%;

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

}

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

```bash
.conter{

width: 600px; height: 400px;

position: absolute; left: 0; top: 0; right: 0; bottom: 0;

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

}