html - 无法使用显示 :table 使 div 居中对齐

Question

我正在使用显示表格和表格单元格垂直对齐中间使 div 居中对齐。但是中心 div 没有定位在中心。

fiddle :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>

Answer 1

.landing-right 有几个问题:

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

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

这是一个代码片段，它使图像在您的案例中水平和垂直居中:

.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>