为什么`display：table-cell` make`margin：0 auto`不起作用？

Question

*{
    padding:0;
    margin:0;
    text-decoration:none;
}
#head{
    width:400px;
    height:40px;
    border:1px solid red;
    margin:0 auto;
    line-height:40px;
    font-size:20px;
    text-align:center;
}

#main{
    width:400px;
    height:400px;
    border:1px solid green;
    margin:0 auto;
    text-align:center;
    vertical-align:middle;
}
 

<div id="head">set in middle and center</div>
<div id="main">
    <img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>
 

你可以看到div {div}和div main都设为margin:0 auto的中心 我想将div main中的图像设置为垂直中间 只需在div main中添加display:table-cell即可

*{
    padding:0;
    margin:0;
    text-decoration:none;
}
#head{
    width:400px;
    height:40px;
    border:1px solid red;
    margin:0 auto;
    line-height:40px;
    font-size:20px;
    text-align:center;
}

#main{
    width:400px;
    height:400px;
    border:1px solid green;
    margin:0 auto;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
 

<div id="head">set in middle and center</div>
<div id="main">
    <img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>
 

现在图像被设置为垂直中间，但div main未设置为margin:0 auto，为什么display:table-cell使margin:0 auto不起作用？

Answer 1

您可以使用ClassA.ClassB.Name的图像使用position: absolute;将其置于中心

检查一下：

＆＃13;

＆＃13;

transform: translate(-50%, -50%);

＆＃13;

*{
    padding:0;
    margin:0;
    text-decoration:none;
}
#head{
    width:400px;
    height:40px;
    border:1px solid red;
    margin:0 auto;
    line-height:40px;
    font-size:20px;
    text-align:center;
}

#main{
    position: relative;
    width:400px;
    height:400px;
    border:1px solid green;
    margin:0 auto;
    text-align:center;
    vertical-align:middle;
}
 
#main img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

＆＃13;

＆＃13;

＆＃13;