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-right: auto;
}

那麼如何垂直方向居中呢

• 這裏面我要強調一下,垂直方向不能夠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^-^