表格单元格垂直alignment不工作
我试图简单地居中文本水平和垂直使用DIV和显示types为表格单元格，但它不工作在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; } 我究竟做错了什么？
我认为table-cell需要有一个父级display:table元素。
这是我如何做到的：
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：集中事物 。
您可以垂直alignment浮动元素的方式，在IE 6 +的作品。 它也不需要全表标记。 这种方法并不完全干净 – 包括包装，有几件事情要注意，例如，如果你有太多的文字超出容器 – 但它是相当不错的。
简短的回答：您只需要将display: table-cell到浮动元素中的元素（表格单元格不会浮动），并使用旧position: absolute和top的回退。
长答案：这是一个显示基础的jsfiddle 。 总结重要的东西（有条件的评论添加一个.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;这样的溢出方法overflow: auto;上class） - 在旧的IE浏览器中，内容元素不会伸展以填充可用空间 – 高度是内容的高度，而不是容器的高度。
这些都是相当小的限制，但值得注意。
代码和想法改编自这里
一个样式如下的元素将垂直alignment中间：
.content{ position:relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top:50%; }
但是，父元素必须具有固定的高度。 看这个小提琴： https : //jsfiddle.net/15d0qfdg/12/
在我的情况下，我想在一个位置为absolute的父容器中居中。
<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 }
因为你仍然使用浮动…
尝试删除“浮动”，并用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>
看到这个bin： http : //jsbin.com/yacom/2/edit
应该设置父元素
display:table-cell; vertical-align:middle; text-align:center;
有时浮起制动器的垂直alignment，最好避开它们。
设置父元素的高度。
使用另一个包装器浮动它，而不使用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>
