margin:auto为什么不垂直居中

margin:auto是具有强烈计算意味的关键字，用来计算元素对应方向上应该获得的剩余空间大小。

所以行内元素margin:auto; 不能水平居中在一行的中央位置（行内元素不独占一行）。

 

<div style="width:200px;height: 20px;background-color:red;margin:auto;">我是div

 

因为块级元素设置宽度后仍占据一行空间，因此margin:auto;会将这一行的剩余空间平均分配给左右外边距。

同理margin:auto 能使块级元素水平居中，但是不能垂直居中，因为垂直方向上默认没有剩余的空间。

 

行内元素margin:auto既不能水平居中也不能垂直居中，因为行内元素水平垂直方向上默认都没有剩余的空间。