我需要一排可点击的大象，垂直居中，但不用桌子来绕过一些InternetExplorer9的奇怪之处。

我最终找到了最好的CSS（满足我的需要），它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是，Internet Explorer 9仍然在嘲笑我。。。

第二部分{边框：1px蓝色虚线；显示：内联；线条高度：100px；高度：100px；}跨度{边框：1px纯红色；显示：内联块；线高度：正常；垂直对齐：中间；}.输出{边框：3px纯银；显示：内联块；}<div class=“out”onclick=“alert（1）”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div>＜div＞＜span＞一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert（2）”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div>＜div＞＜span＞点击一些迷人的东西。</span＞</div></div>

显然，你不需要边界，但它们可以帮助你了解它是如何工作的。

您可以通过添加以下CSS代码轻松完成此操作：

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

这意味着您的CSS最终看起来像：

#盒子{高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；显示：表格单元格；垂直对齐：中间；}<div id=“box”>一些文本</div>

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看！

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

灵活的方法

第二部分{宽度：250px；最小高度：50px；线条高度：50px；文本对齐：居中；边框：1px实心#12346；边距底部：5px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet</span></div>＜div＞

这很简单，也很短：

.块{显示：表格行；垂直对齐：中间；}.平铺{显示：表格单元格；垂直对齐：中间；文本对齐：居中；宽度：500px；高度：100px；}<div class=“body”><span class=“tile”>你好，中间世界！：）</span></div>