Div table-cell vertical align not working

Question

我试图简单地使用DIV水平和垂直居中文本并将显示类型显示为表格单元格,但它在IE8或Firefox中都不起作用.

下面是我正在使用的CSS,这就是html页面中的所有内容.

@charset "utf-8";
/* CSS Document */
html, body
{
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

我究竟做错了什么？

Answer 1

我认为table-cell需要有一个父display:table元素.

Answer 2

我是这样做的:

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML:

<div id="content">
    Content goes here
</div>

看到

垂直居中的例子

和

CSS:以事物为中心.

Answer 3

您可以以适用于IE 6+的方式垂直对齐浮动元素.它也不需要全表标记.这个方法不是很干净 - 包括包装器,有一些事情要注意,例如,如果你有太多的文本溢出容器 - 但它是相当不错的.

简短的回答:你只需要申请display: table-cell一个元素内的浮动元素(表细胞不浮动),并使用回退与position: absolute和top旧IE.

答案很长:这是一个展示基础知识的小提琴手.总结的重要内容(使用条件注释添加.old-ie类):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

这是一个jsfiddle,用这种方法故意突出小故障.请注意:

• 在标准浏览器中,超出包装元素高度的内容会停止居中并开始向下移动页面.这不是一个大问题(可能看起来比爬上页面好),并且可以通过避免太大的内容来避免(注意除非我忽略了某些东西,溢出方法overflow: auto;似乎不起作用)
• 在旧的IE中,内容元素不会伸展以填充可用空间 - 高度是内容的高度,而不是容器的高度.

这些都是非常小的限制,但值得注意.

代码和想法从这里改编

Answer 4

如下样式的元素将垂直对齐到中间:

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

但是,父元素必须具有固定的高度.看到这个小提琴:https://jsfiddle.net/15d0qfdg/12/

Answer 5

看到这个垃圾桶：http : //jsbin.com/yacom/2/edit

应该将父元素设置为

display:table-cell;
vertical-align:middle;
text-align:center;

Answer 6

在我的例子中,我想以一个位置为绝对的父容器为中心.

<div class="absolute-container">
    <div class="parent-container">
        <div class="centered-content">
            My content
        </div>
    </div>
</div>

我不得不为顶部,底部,左侧和右侧添加一些定位.

.absolute-container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.parent-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.centered-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}