margin：0 auto；

margin：0 auto；

auto可以理解为平方剩余的空间
块级元素没有设置宽度是撑满整行的。所有在设置margin：0 auto;没有效果。

行级元素不起作用

当设置了宽度就有剩余空间auto就有作用了

<div class="container"></div>

.container {
	height：100px;
	width：100px；
	background-color： red；
}

效果

想要用margin实现上下左右居中的话，设置position: absolute，然后让4边都设为0,这样就充满整个容器，再用margin：auto来平方空间。这样就能水平垂直居中了。

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

		.container {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

效果：