margin: 0px auto与居中

代码如下
.cen {
	margin: 0px auto;
	border: 1px red solid;
}
</style>
</head>
<body>
	<div class="cen">aaa</div>
</body>


发现div并没有居中显示,原因是它的width没有设置,默认值为auto.
而CSS规范中说

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

我猜它的意思是如果width是auto,那么其他的auto会设为0,然后width设为最大宽度.
PS: follows from the resulting equality.真心理解不了....

所以上面那个例子中,div没居中显示.
解决方法要看究竟是想div居中,还是div里面的字居中

div居中
.cen {
	margin: 0px auto;
	border: 1px red solid;
	width: 300px;
}


div的内容居中
.cen {
	margin: 0px auto;
	border: 1px red solid;
	text-align: center;
}


你可能感兴趣的:(css)