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^-^