Question

我已经看过几个垂直对齐div的其他帖子，但我找到的解决方案似乎并不适用于我的用例。我想把div放在“我想要中心 - 这个 - 而忽略其他两个div”这个类的垂直中心。

我在jsfiddle here上有一个非常简单的例子。

任何人都可以帮我解决这个问题吗？

代码：

HTML：

   <div id="container">
        <div class="I-want-to-ignore-this"></div>
        <div class="I-want-to-ignore-this float-right"></div>
        <div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
    </div>

CSS：

#container {

    height: 300px;
    width: 100%;
    border: 2px solid black;
}

.I-want-to-ignore-this{

    float:left;
    height: 75px;
    width: 100px;
    border: 2px solid grey;
}

.float-right {
    float: right;
}

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;

    margin: auto;
    vertical-align: center;
}

Answer 1

将此添加到中心div css：

position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;

从那里删除margin

将此添加到容器中：

position:relative;

修改：JSFiddle

Answer 2

在评论部分中，您指定了您的容器将固定高度。最简单的解决方案是仅使中心div的位置相对，并使用“top”CSS属性将其向下移向框的中心。

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;
    position:relative;
    top:70px;
    margin: auto;
    vertical-align: center;
}

以下是更新后的JSFiddle。

（注意：如果容器更改大小，则需要更新变量;但修复此解决方案应该可以正常工作）

Answer 3

我只想为你的中心div添加一个上边距：

.I-want-to-center-this-while-ignoring-the-other-two-divs {
    border: 2px solid green;
    height: 150px;
    width: 150px;
    margin: auto;
    margin-top: 73px;
}

由于您的父容器上有一个固定的高度且div已知高度，因此这是最简单的方法。

数学是:(父高 - （子高+顶边+底边））/ 2

http://jsfiddle.net/audetwebdesign/7SfKW/10/

Answer 4

.I-want-to-center-this-while-ignoring-the-other-two-divs{
    position:relative;
    top:25%;
    border: 2px solid green; 
    height: 150px;
    width: 150px;
    margin: auto;

}

检查一下：JSFIDDLE

您的容器高度为300px，您想要居中的div为150px。通过应用简单的数学运算使div居中，您需要在50px以上和50px以下的垫上以使div居中。所以 top：25％会这样做。

只需将位置和顶部属性添加到您的css中，如上所示

垂直对齐div

4 个答案: