Html 垂直对齐div

我已经看过其他几个关于垂直对齐div的帖子，但是我发现的解决方案似乎不适合我的用例。我想用类“I-want-to-center-this-while-ignore-the-other-two-divs”垂直居中这个div

我有一个关于JSFIDLE的非常简单的例子

有人能帮我解决这个问题吗

代码：

HTML:

---

将此添加到中心div css：

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

从那里删除

边距

将此添加到容器：

position:relative;

---

编辑：

在注释部分，您指定容器的高度为固定高度。最简单的解决方案是使中心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;
}

这里是最新的

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

选中此项：

您的容器高度为300px，要居中的div为150px。通过应用简单的数学方法使div居中，您需要在上方垫50px，下方垫50px以使div居中。因此top:25%可以做到这一点

---

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

我只需将顶部边距添加到中间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

---

你想完成什么？明确你要提出的问题。。你在期待什么？为了清楚起见，编辑了问题，对不起that@Accipheran：看起来您的容器总是固定高度。这只是一个例子，还是您的实际版本是固定高度而不调整？如果已修复，最简单的修复方法是将“top”属性添加到中心div以调整其位置。@DevonBernard在我的用例中，容器实际上是一个固定高度。这似乎对我不起作用。你试过小提琴吗？是的。你确定你删除了

margin:auto

？我刚试了第二次，它成功了，很抱歉。我不确定是不是因为我忘了删除边距：自动还是不自动+1'ed但接受了Devon Bernard，因为我喜欢他使用垂直对齐：中心谢谢！成功了。我认为我的问题是我没有把我想（垂直）居中的div的位置设置为relative@Acceipheran没问题，这就是为什么。祝你项目的其他部分好运；请记住在你有能力的时候接受这个答案。或者，你可以简单地调整顶部的边距，见下面我的答案。@MarcAudet非常正确Marc，观点很好。我相信这个解决方案的唯一问题是，如果用户想把信息放在中间div上方的区域；但既然他们没有，那就行了+1.

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

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

}

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