如何使用 CSS 垂直居中文本？

问题描述

您可以尝试这种基本方法：

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

但是它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

更通用的方法

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

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

CSS通过将’ 的 line-height 设置为等于其高度来<div>调整的大小，垂直居中对齐，并使用. 然后它将 line-height 设置为的正常值，因此其内容将在块内自然流动。<span>``<div>``<span>``vertical-align: middle``<span>

模拟表格显示

这是另一个选项，它可能不适用于不支持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;
}
<div>
  <span>Hello World!</span>
</div>

使用绝对定位

这种技术使用绝对定位的元素，将 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;
}
<div>
  <span>Hello World!</span>
</div>

另一种方法（这里还没有提到）是使用Flexbox。

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

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

Flexbox demo1

.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 */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

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

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

Flexbox demo2

.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;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

以上所有内容都适用于将项目放置在中时居中。这也是默认行为，因为默认flex-direction值为row. 中布局，flex-direction: column则应在容器上设置以将主轴设置为列，此外，justify-contentandalign-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;
  }

开始使用 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>包含文本的元素，我想对齐这个<div>垂直中心的内容。

这是我的<div>风格：

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

实现这一目标的最佳方法是什么？

html