margin:0 auto 为何会居中

margin: 0 auto;为何会居中呢???

• 一开始的学习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;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNFMSMMc-1573461989263)(https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191109161651390-379867677.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9MlYbdxw-1573461989265)(https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191110123805316-1518019336.png)]
他竟然靠在了右侧

• 因为他只设置了左侧为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;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ip3Uip5-1573461989266)(https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191109162622212-1763492665.png)]

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

• 分享不易,感谢star^-