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>

见

Example of vertical centering

和

CSS: centering things

Answer 3

你可以以IE 6+的方式垂直对齐浮动元素。它也不需要全表标记。这种方法并不完全干净 - 包括包装器，有一些事情要注意，例如如果你有太多的文字超出容器 - 但它非常好。

简答：您只需要将display: table-cell应用于里面的浮动元素（表格单元格不浮动），并使用后备旧版IE使用position: absolute和top。

答案很长：这是jsfiddle showing the basics。总结的重要内容（使用条件注释添加.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 that deliberately highlight the minor faults。请注意：

在标准浏览器中，超出包装元素高度的内容会停止居中并开始向下移动页面。这不是一个大问题（可能看起来比爬上页面好），并且可以通过避免太大的内容来避免（请注意除非我忽略了某些内容，否则overflow: auto;之类的溢出方法不会似乎工作）

在旧的IE中，内容元素不会拉伸以填充可用空间 - 高度是内容的高度，而不是容器的高度。

这些是非常小的限制，但值得注意。

Code and idea adapted from here

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
}

Answer 7

因为你还在使用浮动......

尝试删除“float”并用display：table

包装它

示例：

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>

Answer 8

有时漂浮制动垂直对齐，最好避免它们。

Answer 9

设置父元素的高度。

Answer 10

使用另一个包装器将其浮动而不使用display: table;，它可以工作：

<div style="float: right;">
   <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>

Div table-cell vertical align not working

10 个答案: