需要帮助垂直居中 div [重复]答案

【问题标题】：Need help vertically center a div [duplicate]需要帮助垂直居中 div [重复]
【发布时间】：2014-07-16 20:42:52
【问题描述】：

我想知道在另一个 div 中垂直居中的最佳方法是什么。我唯一的限制是 .anim 需要保持相对！我在下面找到了我现在拥有的当前代码。谢谢大家！

HTML：

<div class="anim">

         <div class="spacer">
            <p>CONTENT</p>
            <p>more content</p>
        </div>

    </div>

CSS：

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:50%;
}

.spacer{
    position:absolute;
    height:300px;
    top:0;
    bottom:0;
}

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}

垂直对齐

【讨论】：

如果您打算这样做，您应该在.anim 和.spacer 之间使用另一个块元素并将其设置为display:table-row。 CSS 表格应该模仿实际的表格。
是的，我早些时候尝试过这种方法，但奇怪的是没有用：/
不确定你之前是否有定位的东西，但这肯定会阻止它工作

【解决方案2】：

一个简单的方法是给你的.anim div 一个固定的高度，比如说500px。

然后你可以添加一个margin-top：

.anim {
  margin-top: 100px;    // (500 - 300) / 2 = 100
}

demo

【讨论】：

有没有办法在没有固定高度的情况下做到这一点？我正在使用百分比：/
@kduan 在可变高度容器内有一个固定高度的元素可能是个问题：例如，如果 50% 等于 200px，那么您的 300px 元素将溢出其父元素！这个 50% 的高度要求背后的逻辑是什么？
好吧，我把屏幕分成了两半。我想把这个 div 放在下半部分。
对于溢出，我计划为移动设备和小屏幕做一些不同的事情

【解决方案3】：

根据 w3：http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 没有垂直居中的属性。 CSS level 3 中可能会有一个。但即使在 CSS2 中，您也可以通过组合一些属性来垂直居中块。诀窍是指定将外部块格式化为表格单元格，因为表格单元格的内容可以垂直居中。

所以代码真的很简单

.anim {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

这里是演示http://jsfiddle.net/AbTxS/

【讨论】：

感谢您的帮助！但问题是我不能有一个固定的高度：/。我应该在前面提到过对不起！

【解决方案4】：

从您的问题来看，您似乎想要这样的东西...div.spacer 垂直居中，div.anim 保持相对。

div.spacer 上边距必须是.spacer 高度的负一半。

此解决方案仅适用于 .spacer 的固定高度。

CSS

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:800px;
    background:#FF0
}    
.spacer {
    position:absolute;
    top:50%;
    margin:-150px 0 0;
    width:300px;
    height:300px;
    background:red
}

HTML

<div class="anim spacer">
    <p>
        Content
    </p>
    <p>
        More content
    </p>
</div>

【讨论】：

我不能做固定高度抱歉：/