无法定义设置为 display:table-cell 的 DIv 的高度或宽度答案

【问题标题】：Cannot define the height or width of a DIv set to display:table-cell无法定义设置为 display:table-cell 的 DIv 的高度或宽度
【发布时间】：2011-07-28 19:25:57
【问题描述】：

我有一个 div 包裹在另一个 div 中。父div设置为：

显示：表格

子div设置为

div:表格单元格

这是为了使某些文本垂直和水平居中。但我还需要定义该文本的大小。这是因为 div 需要浮动在浏览器窗口的中心，而窗口本身也在一个长页面上。

我已经上传了一个截图来告诉你我的意思。

所以，这就是为什么我也需要定义表格单元格 div 的高度和宽度。它需要适合那个圈子。

我不知道为什么我不能设置这个表格单元格的高度或宽度。我还需要在 CSS 而不是 jquery 中执行此操作，因为它将是人们在页面加载时首先看到的内容，并且登录页面上会有很多内容。

我把代码放在这里： http://jsfiddle.net/Kpr9k/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">

body, html {
width:100%;
height: 100%; 
background-color: gray;
margin: 0;
padding: 0;
}

#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}

#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}

</style>
</head>

<body>
<div id="myTable">
    <div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>

</html>

【问题讨论】：

标签： html css vertical-alignment css-tables

【解决方案1】：

答案如下：

我很惊讶这有多复杂，有人有更好的解决方案吗？

http://jsfiddle.net/2Z2BF/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">

html,body{
    height:100%;
    margin:0;
    padding:0;
}

#stopTheOverlayFromAffectingTheContent {
    position: absolute;
    width: 100%;
    height: 100%;
}

#verticalFix{
    height:50%;
    margin-top:-250px;
    width:100%;
}

#horizontalFix {
    width:500px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
}

#myTable {
    background-color: aqua;
    display: table;
    width: 100%;
    height: 100%
}

#myCell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#contentBelow {
    height:3000px;
}

h1 {color:#fff;margin:0;padding:0}
</style>
</head>

<body>
    <div id="stopTheOverlayFromAffectingTheContent">
        <div id="verticalFix"></div> 
        <div id="horizontalFix"> 
            <div id="myTable">
                <div id="myCell">Lorem Ipsum</div>
            </div>
        </div>
    </div>
<div id="contentBelow">DEVIL</div>
</body>    
</html>

【讨论】：

【解决方案2】：

我认为display: table-cell; 的行为是填充任何display: table; 父级。

编辑：

通过在 jsfiddle 上修改您的代码确认了这一点。

我对您的建议是使用绝对定位将容器 div 在页面中居中，并在内部 div 上使用display: table-cell; 来获得垂直对齐。

【讨论】：

但是我怎样才能定义我想要垂直和水平居中的东西的大小呢？
嗯，如果你的意思是字面上只是添加 position:absolute;对父母来说，这似乎不起作用。你能澄清一下吗？非常感谢。