博客

在实现元素居中的时候相信很多小伙伴都知道一个方法，就是通过margin： 0 auto,来实现水平居中，那么为什么，auto对于垂直方向来说不生效呢

css规范：

The following constraints must hold among the used values of the other properties:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

下面是关于高度的：

If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0. If ‘height’ is ‘auto’, the height depends on whether the element has any block-level children and whether it has padding or borders:

首先我们要理解auto的意思是什么，auto是自动填充剩余空间

块级元素，即便我们设置了宽度，他还是自己占一行，在css的规范中，元素他的左外边距+左边框宽度+左内边距+内容的宽度+右内边距+右边框+右外边距=包含块的宽度，如果我们给他的左右外边距设置为auto的时候，他会实现平分剩下的距离，从而达到一个水平居中的效果

但是块级元素的高度并不会自动扩充，所以他的外部尺寸是不自动充满父元素的，也没有剩余的空间，因此margin上下设置auto不能实现垂直居中

但是我们可以通过   定位+margin  来实现

  #division{
            width: 200px;
            height: 200px;
            background-color:steelblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; 
            margin:auto;
        } 

这里要注意哦，上下左右四个一个不能少，当我们给他定位让他上下左右都是0的时候，我们就有了多余空间，auto就能平分剩余的空间去实现水平垂直居中