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;
}

那么如果只有一側設置了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就有了作用,會平均分配剩余的空間

• 分享不易,感謝star^-