我不确定是否有人走上了写作模式的道路，但我认为它彻底解决了问题，并得到了广泛的支持：

.垂直{//边框：1px实心绿色；写入模式：垂直lr；文本对齐：居中；高度：100%；宽度：100%；}.水平{//边框：1px纯蓝色；显示：内联块；书写方式：水平tb；宽度：100%；文本对齐：居中；}.内容{文本对齐：左侧；显示：内联块；边框：1px实心#e0e0e0；衬垫：.5em 1em；边界半径：1em；}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>

当然，这将适用于您需要的任何维度（除了100%的父维度）。如果取消注释边界线，这将有助于熟悉自己。

JSFiddle演示供您摆弄。

犬只支持：85.22%+6.26%=91.48%（甚至Internet Explorer也支持！）

供参考并添加更简单的答案：

纯CSS：

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

或作为SASS/SCSS混合物：

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用人：

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström的博客文章垂直对齐任何东西，只需3行CSS：

由于元素放置在“半像素”上，此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示：

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

我们生活在2015年+，每个主要的现代浏览器都支持Flex Box。

这将是网站从现在开始制作的方式。

学习它！

另一种方式（此处尚未提及）是使用Flexbox。

只需向容器元素添加以下代码：

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox演示1

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；对齐内容：中心；/*水平对齐*/对齐项目：居中；/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet，consectetuer adipiscing elit，sed diam nonmmy笔尖</div>

或者，当柔性容器中只有一个柔性项时，flexbox也可以使用自动边距将柔性项居中，而不是通过容器对齐内容（如上面问题中给出的示例）。

因此，要在水平和垂直方向上将柔性项居中，只需将其设置为margin:auto

Flexbox演示2

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；}.箱形跨度{边距：自动；}<div class=“box”><span>边距：在弹性项上自动将其水平和垂直居中</span></div>

注意：以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为，因为默认情况下，弯曲方向的值为row。然而，如果柔性项需要在垂直列中布局，则应在容器上设置柔性方向：列，以将主轴设置为列，此外，justify-content和align-items财产现在与justify content相反：垂直居中和align-items：水平居中）

灵活方向：列演示

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：18px；字体样式：倾斜；颜色：#FFF；显示：柔性；弯曲方向：柱；对齐内容：中心；/*垂直对齐项目*/对齐项目：居中；/*水平对齐项目*/}p型{边距：5px；}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容：居中”-垂直对齐</p><p>“对齐项目：居中”-水平对齐</p></div>

flexyboxes是一个很好的地方，可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持

此外，现在的浏览器支持非常好：caniuse

为了实现显示的跨浏览器兼容性：调整和对齐项目，可以使用以下选项：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

尝试转换属性：

#盒子{高度：90px；宽度：270px；位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>

我需要一排可点击的大象，垂直居中，但不用桌子来绕过一些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>

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

对于单行文本（或单个字符），可以使用以下技术：

当#box具有非固定的相对高度（以%为单位）时，可以使用它。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

在JsBin（更容易编辑CSS）或JsFiddle（更容易更改结果框的高度）观看现场演示。

如果你想将内部文本放在HTML中，而不是CSS中，那么你需要将文本内容包装在额外的内联元素中，然后编辑#box:：after以匹配它。（当然，content:property应该被删除。）

例如<div id=“box”><span>文本内容</span></div>。在这种情况下，#box：：after应替换为#box span。

对于Internet Explorer 8支持，必须将：：替换为：。