margin:0 auto为何会居中?

margin: 0 auto;为何会居中呢???
margin:auto 实现的条件

网上搜索到margin：auto 实现的条件有三：

第一：给居中的元素一个固定的宽度（固定的宽度不是指一定要px）

第二：该元素没有设浮动

第三：父级使用

标签（center标签在html4.01中已经废弃，在html5里不支持可以设置css属性text-align:center代替）

在满足1，2的条件下我将行内元素设置了display:inline-block属性来支持with的设置

然后设置margin:auto的属性，但是无效。

把display属性改成display:block margin:auto生效了（然而我并没有将他的父级设置text-align:center属性）

当然把将父级设置text-align:center属性 即使display为inline-block也是同样能实现居中效果的

一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中

但是后来就很好奇

margin: auto 0;为何不能垂直居中?
margin: 0 auto 0 0;如果只设置一个margin会发生什么?

现在我们就开始学一下

首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度,margin:0 auto的auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200/2)

div{
	height: 200px;
	width: 200px;
	background: red;
	margin: 0 auto;
}

那么如果只有一侧设置了auto会产生什么效果

div{
	height: 200px;
	width: 200px;
	background: red;
	margin-left: auto;
}

他竟然靠在了右侧

因为他只设置了左侧为auto,那么父元素剩余的空间都会分给左侧,就实现了float:left;的效果
做到了这一步我感觉实在是太神奇了啊,他竟然可以代替浮动的效果

那么如何垂直方向居中呢

这里面我要强调一下,垂直方向不可以margin: auto 0
主要的原因就是垂直方向,我们没有剩余的空间
那么我们就不能垂直方向居中了吗???,当然是可以的,我们来试一下

div{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 200px;
	width: 200px;
	background: red;
}

原理: 如果设置了绝对定位并且上下左右全部为0(不能只设置上左或者其他的任意两方向),那么他会填充整个父元素的所有可用空间,那么auto就有了作用,会平均分配剩余的空间