margin:0 auto不生效

解决方案

设置子元素为块元素即可，子元素display:block。margin 0 auto只对块元素有效，父元素子元素必须都是块元素。

.css{
	display:block
}

小贴士

你是不是曾经想过，既然margin 0 auto可以水平居中，那么为什么margin auto不能水平垂直都居中呢？我设置之后，垂直方向没有效果，这是为啥？

这是学艺不精的表现，我曾经也苦恼过。其实margin:auto也好,margin:0 auto也罢，它们的auto其实是弹性计算，而普通的盒子模型（非弹性flex盒子）只有水平方向是弹性的，垂直方向不是弹性的。所以要想让margin:auto生效，很简单，父元素设置display:flex就可以啦！

代码

css

.father{
	display: flex;
	width: 300px;
	height: 300px;
	background-color: #00B5EE
}
.child{
	width: 100px;
	height: 100px;
	margin: auto;
	background-color: red
}

html

<div class="father">
	<div class="child"></div>
</div>

效果

是不是解决了你多年的苦恼呢?