margin auto的用法

最新推荐文章于 2025-08-25 16:20:11 发布

maopop

最新推荐文章于 2025-08-25 16:20:11 发布

阅读量2w

点赞数 15

本文详细解析了 CSS 中 margin 属性的 auto 值用法。通过实例展示了如何使用 margin 的 auto 值实现元素的居中、居左及居右布局。此外还介绍了 auto 在不同浏览器下的兼容性表现。

margin:auto 解释

解析margin的自动值auto

auto自动是字面的意思

定义一个方向为auto，可以理解为此方向随便，自由

以前不是有个经典的FF居中么 margin:0 auto，这个其实在IE6下支持也是很好的，于是也有了如下延伸：

居中 margin:0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <div style="height:300px; background:#ccc;"> <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div> </div> </body> </html>

居左 margin:0 auto 0 0

居右 margin:0 0 0 auto

注意：没有上或者下方向的auto
此应用一定程度上可以代替float，而且更方便，兼容更好

例：margin: 15px auto;
上下边距为15PX 左右自动
margin:auto;
表示上下左右都自动

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。