我看到了以前的答案，它们仅适用于该屏幕宽度（无响应）。对于响应式，您必须使用 flex。

例子：

div { display:flex; align-items:center; }

被接受为答案的解决方案非常适合使用与 div 的高度相同的 line-height，但是当文本被换行或在两行中时，此解决方案无法完美运行。

如果文本被换行或在 div 内的多行上，请尝试这个。

#box
{
  display: table-cell;
  vertical-align: middle;
}

如需更多参考，请参阅：

垂直居中多行文本

6种使用CSS垂直居中的方法

您可以使用以下代码片段作为参考。它对我来说就像一个魅力：

html, 身体 { 高度：100%;边距：0；填充：0；宽度：100%； } 身体 { 显示：表； } .centered-text { 文本对齐：居中；显示：表格单元格；垂直对齐：中间； }

上述代码片段的输出如下：

https://i.stack.imgur.com/q9DkN.png

试试 this solution：

.EXTENDER { 位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；溢出-y：隐藏；溢出-x：隐藏； } .PADDER-CENTER { 宽度：100%;高度：100%；显示：-webkit-box；显示：-moz-box；显示：-ms-flexbox；显示：-webkit-flex；显示：弯曲； -webkit-box-pack：中心； -moz-box-pack：中心； -ms-flex-pack：中心； -webkit-justify-content：中心；证明内容：中心； -webkit-box-align：居中； -moz-box-align：居中； -ms-flex-align：居中； -webkit-align-items：居中；对齐项目：居中； }

使用 CSS+ 构建。

您还可以使用以下属性。

display: flex; 
align-content: center; 
justify-content : center;

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。与 line-height 类似，它仅在您有一行文本时才有效。虽然这样的话，如果内容比较多，文字还是会居中，但是div本身会稍微大一些。

因此，不要使用：

div {
  height: 120px;
  line-height: 120px;
}

你可以说：

div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}

这会将 div 的顶部和底部 padding 设置为 60px，将左侧和右侧 padding 设置为零，使 div 120 像素（加上字体的高度）高，并放置文本在 div 中垂直居中。

我不确定是否有人走 writing-mode 路线，但我认为它干净利落地解决了问题并且得到了广泛的支持：

.vertical { //border: 1px 纯绿色；写作模式：垂直lr；文本对齐：居中；高度：100%；宽度：100%； } .horizontal { //border: 1px 纯蓝色；显示：内联块；写作模式：水平-tb；宽度：100%；文本对齐：居中； } .content { 文本对齐：左；显示：内联块；边框：1px 实心#e0e0e0；填充：0.5em 1em；边界半径：1em； }

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

JSFiddle demo 供您摆弄。

Caniuse support：85.22% + 6.26% = 91.48%（甚至 Internet Explorer 也在！）

满足您所有的垂直对齐需求！

声明这个 Mixin：

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

然后将其包含在您的元素中：

.element{
    @include vertical-align();
}

更好的主意。你也可以这样做

正文，html {高度：100%； } .parent { 空白：nowrap;高度：100%；文本对齐：居中； } .parent:after { display: inline-block;垂直对齐：中间；高度：100%；内容： ''; } .centered { 显示：内联块；垂直对齐：中间；空白：正常； }

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

它可以在 #box 具有非固定的相对高度（%）时使用。

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

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

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

查看现场演示 at JsBin（更易于编辑 CSS）或 JsFiddle（更易于更改结果框架的高度）。

如果您想在 HTML 中而不是在 CSS 中放置内部文本，那么您需要将文本内容包装在附加的 inline 元素中并编辑 #box::after 以匹配它。 （当然，应该删除 content: 属性。）

例如，<div id="box"><span>TextContent</span></div>。在这种情况下，#box::after 应替换为 #box span。

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

尝试转换属性：

#box { 高度：90px;宽度：270px；位置：绝对；最高：50%；左：50%；变换：翻译（-50%，-50%）； }

一个非常简单且最强大的垂直对齐中心解决方案：

.outer-div { 高度：200px;宽度：200px；文本对齐：居中；边框：1px 实心#000； } .inner { 位置：相对；最高：50%；变换：translateY（-50%）；红色; }

无论屏幕大小或 div 大小如何，以下代码都会将 div 置于屏幕中间：

.center-screen { 显示：弹性；弹性方向：列；证明内容：中心；对齐项目：居中；文本对齐：居中；最小高度：100vh； }

查看有关 flex here 的更多详细信息。

简单而通用的方法是（如 Michielvoo's table approach）：

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

在父标签上使用此属性（或等效类）甚至适用于许多子标签对齐：

<parent ctrv>  <ch1/>  <ch2/>   </parent>

试试下面的代码：

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

div {高度：80%；宽度：100%；文本对齐：居中；显示：表格单元格；垂直对齐：中间；背景：#4CAF50；颜色：#fff;字体大小：50px；字体样式：斜体； }

我只想扩展 the answer from Michielvoo 以释放对行高和 div 高度呼吸的需求。它基本上只是一个简化版本，如下所示：

div { 宽度：250px; /* 高度：100px;行高：100px； */ 文本对齐：居中；边框：1px 实心 #123456;背景颜色：#bbbbff；填充：10px；边距：10px； } 跨度 { 显示：内联块；垂直对齐：中间；行高：正常； }

注意：包含 div 的 fixed-height 需要注释掉的 css 部分。

我需要一排可点击的大象，垂直居中，但不使用表格来解决 Internet Explorer 9 的一些奇怪问题。

我最终找到了最好的 CSS（满足我的需要），它与 Firefox、Chrome 和 Internet Explorer 11 配合得很好。可悲的是，Internet Explorer 9 仍在嘲笑我……

div { 边框：1px 蓝色虚线；显示：内联；行高：100px；高度：100px； } span { 边框：1px 纯红色；显示：内联块；行高：正常；垂直对齐：中间； } .out { 边框：3px 纯银；显示：内联块； }

一个可爱的可点击选项。