Question

我使用显示表和表格单元verticle-align中间使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>

Answer 1

.landing-right有几个问题：

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

对于垂直中心，代码效果很好。

以下是一个代码段，它使图像水平和垂直居中：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该使用margin: auto;作为静态宽度div并删除float: left;。它会使内部水平居中。但垂直中心对齐要困难得多，你应该使用像this one这样的东西。

编辑：您没有提到需要将哪个div居中。这是.landing-right

的中间对齐的解决方案

Answer 3

尝试使用此代码段：

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

Answer 4

在您的css类登陆权限中，您需要进行更改，它应该像这样 -

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

通过保持浮动：向左，你将你的div保持在屏幕的左边，并且在左边的边缘：-70px;永远不会让你的div进入中间，保持它自动，所以div可以有范围与边距，没有浮动的左div将直接进入屏幕中间。

无法使用display：table进行div中心对齐

4 个答案: