还有一种（在此未提及）用法是使用Flexbox。

只需将以下代码添加到容器元素中：

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

Flexbox演示1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

或者，可以使用Flexbox通过自动外边距来居中一个Flex项目，当弹性容器中只有一个Flex项目时（就像在上面的问题中给出的示例相同）。

因此，要水平和垂直居中Flex项，只需将其设置为margin:auto

Flexbox演示2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}

  margin:auto on a flex item centers it both horizontally and vertically 

NB：所有上述内容都适用于在水平行中布局并使它们居中。这也是默认行为，因为默认情况下flex-direction的值为row。但是，如果需要在垂直列中布局弹性项，则应在容器上设置flex-direction: column以将主轴设置为列，此外justify-content和align-items属性现在以相反的方式工作，justify-content: center垂直居中和align-items: center水平居中)。

flex-direction: column 演示

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }

  

    When flex-direction is column...
  
  

    "justify-content: center" - vertically aligns
  
  

    "align-items: center" - horizontally aligns
  

了解 Flexbox 并获取支持多种浏览器的语法的好地方是 flexyboxes

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

为了获得跨浏览器的兼容性，您可以使用以下内容：display: flex 和 align-items

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;

你可以尝试这个基本的方法：

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}

  Hello World!

但是此方法只对单行文本有效，因为我们将行高设置为包含框元素相同的高度。

更通用的方法

这是另一种垂直对齐文本的方法。这种解决方案适用于单行文本和多行文本，但仍需要一个固定高度的容器：

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

  Hello World!

CSS 将只设置 的大小，并通过将 的行高设置为其高度，使 垂直居中对齐，并使 成为带有 vertical-align: middle 的内联块。 然后将 的行高设置回正常值，这样其中的内容就可以在块内自然流动。

模拟表格显示效果

这里是另一种选项，可能在不支持 display: table 和 display: table-cell 的旧 浏览器上无法正常工作（基本上只有 Internet Explorer 7）。使用 CSS 模拟表格行为（因为表格支持垂直对齐），HTML 与第二个示例相同：

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

  Hello World!

使用绝对定位

这种技术使用绝对定位元素来设置 top、bottom、left 和 right 为 0。在 Smashing Magazine 上的一篇文章中，CSS 中的绝对水平和垂直居中 进行了更详细的描述。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}

  Hello World!

该段文本包含了三个

标签，其中两个标签中嵌套了标签，分别显示为数字123加粗。