显示没有任何内容的div？ [关闭]答案

【问题标题】：Displaying divs without any content in them? [closed]显示没有任何内容的div？ [关闭]
【发布时间】：2012-09-28 10:58:02
【问题描述】：

有两个问题。

首先，如果div上没有设置高度，并且没有元素包含在其中，它们根本不会显示吗？
其次，根据第一个问题，如果我想显示一个 div 为身体高度的 90%，水平居中垂直，即使里面没有内容，什么是需要css吗？

【问题讨论】：

试试吧！测试这个比输入问题要快！

标签： html css

【解决方案1】：

欢迎使用神奇的定位功能，高度会自动计算：

#myemptydiv{
    position:absolute;
    top: 5%;    // height gets calculated automatically
    bottom: 5%;
    width: 600px;
    margin: auto;
}

所以，回答您的第一个问题：不，至少如果使用定位没有隐式高度。上面给出的代码回答了第二个问题。

另见：

【讨论】：

【解决方案2】：

要使 div（或任何块元素）完全居中，您应该结合使用绝对定位和负边距。看看这里：enter link description here。尝试调整窗口大小：它的定位是自动发生的。

div {
    width: 90%;  /* Can be a non-percentual number */
    margin-left: -45%; /* negative value of element's width/2 | Can be a non-percentual number */
    margin-top: -45%; /* negative value of element's height/2 | Can be a non-percentual number */
    height: 90%;  /* Can be a non-percentual number */
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}

当然，当您只使用百分比值时，只需进行数学运算会更容易：50% - 45% = 5%（正如 Zeta 的帖子所建议的那样），但我使用这种方法来证明这适用于非百分比值也是如此。 Example.

div {
    width: 320px;
    margin-left: -160px; /* negative value of element's width/2 */
    margin-top: -120px; /* negative value of element's height/2 */
    height: 240px;
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}

当一个元素没有特定的高度并且没有内容时，你不会看到它，不会。它将具有自动宽度（通常为 100%）但没有高度。不过，您可以通过添加边框使其可见：http://jsfiddle.net/TALAA/2/

【讨论】：

@Zeta 我非常清楚自己在做什么。他们有什么问题？当给定非百分比宽度时，这是整个网络上水平和垂直居中元素的最佳方法。我在这里使用了负边距和顶部/左侧值，以明确您也可以将其用于非百分比值。（您的解决方案无法做到这一点）。
我在发布评论后几乎立即删除了我的评论，并且在我意识到自己的错误后也删除了反对票。我要去喝杯咖啡来防止这种事情发生。但是，我仍然相信在这种非常特殊的情况下，top:5%;bottom:5% 而没有margin-top 对于垂直位置来说就足够了。
@Zeta 当然，但是 SO 是一个学习的地方，而不是复制和粘贴。所以我认为最好弄清楚每件事是做什么的，而不是仅仅说：这就是解决方案，玩得开心。但是当他试图用像素值来做这件事时，他会卡住。但是，嘿，没有难过的感觉。