auto是margin的可選值之一。相信大家平時使用auto值時，最多的用法大概是 margin: 0 auto; 和 margin: auto;

不過你可能也發現了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的，都是讓 #demo 水平居中了，但縱向並沒有任何變化。

大家都知道 margin 是復合屬性，也就是說 margin: auto; 其實相當於 margin: auto auto auto auto;，margin: 0 auto;相當於 margin: 0 auto 0 auto;，四個值分別對應上右下左。

水平方向：

> 正常流中的塊級元素框的水平總和就等於父元素的width

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

> 在水平格式化的“7大屬性”中，只有3個可以設置為auto: width, margin-left, margin-right;

水平方向的 auto，其計算值取決於可用空間（剩余空間）。

豎直方向：

寬度計算默認涉及包含塊（可粗略理解為父級元素），而高度計算默認涉及內部元素

默認行為的高度計算則是一系列“撐高”規則，而非“適應於父級”規則。

對於絕對定位元素，有以下算式：

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height of containing block

.father {
                position: relative;
                width: 100px;
                height: 100px;
                background
 
-color: black;
            }
            
            .son {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 50%;
                height: 50%;
                margin: auto;
                background-color: red;
            }

詳解margin： auto