时间戳

首页 > 解决方案 > 为什么 `display:table-cell` 使 `margin:0 auto` 无效？

html - 为什么 `display:table-cell` 使 `margin:0 auto` 无效？

问题描述

*{
    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 head 和 div main 都设置为 center by margin:0 auto，你可以看到。
我想将 div main 中的图像垂直设置为中间。
只需添加display:table-celldiv main.

*{
    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-cellmargin:0 auto

标签： htmlcss

解决方案

您可以position: absolute;在图像上使用transform: translate(-50%, -50%);使其居中

检查这个：

*{
    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%);
}
<div id="head">set in middle and center</div>
<div id="main">
    <img src="https://i.stack.imgur.com/9rdPN.png" alt="">
</div>

推荐阅读