margin:auto为什么不垂直居中

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

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

 

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

 

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

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

 

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

 

posted @ 2021-02-01 21:08  hayway  阅读(1118)  评论(0编辑  收藏  举报