html - 显示没有任何内容的div？

Question

有两个问题。

1. 首先，如果 div 上没有设置高度，并且其中没有包含任何元素，它们根本不会显示吗？

2. 其次，根据第一个问题，如果我想将一个 div 显示为身体高度的 90% 并且水平和垂直居中，即使里面没有内容，需要什么 css？

Answer 1

欢迎来到定位的魔力，自动计算高度：

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

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

也可以看看：

• W3C：CSS2.1：9.3 定位方案。
• W3C: CSS3 basic box model: 9. 计算宽度、高度和边距

Answer 2

要使 div（或任何块元素）完全居中，您应该结合使用绝对定位和负边距。看这里：在此处输入链接描述。尝试调整窗口大小：它的定位是自动发生的。

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 的帖子所建议的那样），但我使用这种方法来证明这适用于非百分比值好。例子。

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/