无法使用 display:table 使 div 居中对齐答案

【问题标题】：Not able to make div center align using display:table无法使用 display:table 使 div 居中对齐
【发布时间】：2017-05-20 20:34:11
【问题描述】：

我正在使用显示表格和表格单元格垂直对齐中间来使 div 居中对齐。但中心 div 不位于中心。

小提琴：Here

CSS：

.landing-right {
    position: relative;
    padding: 50px 0px;
    float: left;
    display: table;
    width: 365px;
    height: 100%;
    margin-left: -70px;
}
.landing-img {
    height: 420px;
    position: relative;
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    border: 15px solid #fff;
    display: table-cell;
    vertical-align: middle;
}

HTML：

<div class="landing-right">
            <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">                
</div>

【问题讨论】：

标签： html css

【解决方案1】：

.landing-right有几个问题：

它有float: left。如果需要水平居中，则不应定义此 CSS 规则。
它有margin-left: -70px，使它向左偏移70px。它不是必需的，如果元素需要水平居中，则应将其删除。
没有定义 CSS 规则来水平居中元素，最简单的实现方法是使用 margin: 0 auto。

对于垂直居中，代码运行良好。

这是一个代码 sn-p，它使图像在您的情况下水平和垂直居中：

.landing-main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fefefe;
}
.landing-right {
    position: relative;
    padding: 50px 0px;
    display: table;
    width: 365px;
    height: 100%;
    margin: 0 auto;
}
.landing-img {
    height: 420px;
    position: relative;
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    border: 15px solid #fff;
    display: table-cell;
    vertical-align: middle;
}
.landing-inner {
    width: 100%;
    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.4);
    padding: 40px 0px;
    min-height: 100vh;
    background: #f8f8f8;
}

<div class="landing-main">

<div class="landing-inner">
<div class="landing-right">
            <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">
            
            </div>
        </div>
        </div></div>

【讨论】：

【解决方案2】：

您应该使用 margin: auto; 作为静态宽度 div 并删除 float: left;。它将水平居中内部。但是垂直居中对齐更难，你应该使用this one之类的东西。

编辑：你没有提到哪个 div 需要居中。这是.landing-right中间对齐的解决方案

【讨论】：

【解决方案3】：

试试这个代码 sn-p:

.landing-right {
    position: relative;
    display: table;
    width: 365px;
    margin: 0 auto;
 }

【讨论】：

来自审核队列：我可以请求您在您的答案周围添加更多上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者都有帮助。

【解决方案4】：

在你的css类登陆-权，你需要做出改变，应该是这样的-

.landing-right {
    position: relative;
    padding: 50px 0px;
    display: table;
    width: 365px;
    height: 100%;
    margin-left: auto;
}

通过保持浮动：左，您使您的 div 粘在屏幕的左侧，并在其顶部以 margin-left: -70px;永远不会让您的 div 进入中间，将其保持为 auto 以便 div 可以拥有带边距的范围，并且没有浮动的左 div 将直接进入屏幕中间。

【讨论】：