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

How do I vertically center text with CSS?

提问by Irakli Lekishvili

I have a div element which contains text, and I want to align the contents of this div vertically center.

我有一个包含文本的 div 元素，我想将此 div 的内容垂直居中对齐。

Here is my div style:

这是我的 div 样式：

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

What is the best way to do this?

做这个的最好方式是什么？

回答by Michiel van Oosterhout

You can try this basic approach:

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

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

<div>
  Hello World!
</div>

It only works for a single line of text though, because we set the line's height to the same height as the containing box element.

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

---

---

A more versatile approach

更通用的方法

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

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

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>

The CSS just sizes the <div>, vertically center aligns the <span>by setting the <div>'s line-height equal to its height, and makes the <span>an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.

的CSS只是尺寸的<div>，垂直中心对齐到的<span>通过设置<div>的行高等于其高度，并使得<span>直列块用vertical-align: middle。然后它将 的 line-height 设置回正常<span>，因此它的内容将在块内自然流动。

---

---

Simulating table display

模拟表格显示

And here is another option, which may not work on older browsers that don't support display: tableand display: table-cell(basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

这是另一种选择，它可能不适用于不支持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>

---

---

Using absolute positioning

使用绝对定位

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

这种技术使用绝对定位的元素，将 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>

回答by Danield

Another way (not mentioned here yet) is with Flexbox.

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

Just add the following code to the containerelement:

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

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

Flexbox demo 1

弹性盒演示 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 */
}

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

Alternatively, instead of aligning the content via the container, flexbox can also center the a flex itemwith an auto marginwhen there is only one flex-item in the flex container(like the example given in the question above).

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

So to center the flex item both horizontally and vertically just set it with margin:auto

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

Flexbox Demo 2

弹性盒演示 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;
}

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

NB:All the above applies to centering items while laying them out in horizontal rows. This is also the default behavior, because by default the value for flex-directionis row. If, however flex-items need to be laid out in vertical columns, then flex-direction: columnshould be set on the container to set the main-axis as column and additionally the justify-contentand align-itemsproperties now work the other way aroundwith justify-content: centercentering vertically and align-items: centercentering horizontally)

注意：以上所有内容都适用于将项目放在水平行中时居中。这也是默认行为，因为默认情况下该值flex-directionIS row。然而如果柔性物品需要在要布置的垂直列，那么flex-direction: column应该在容器上被设置为设置主轴作为柱和另外的justify-content和align-items属性现在工作的其他方式与justify-content: center垂直定心和 align-items: center水平定心）

flex-direction: columndemo

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

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes

从 Flexbox 开始以查看其某些功能并获取最大浏览器支持的语法的好地方是flexyboxes

Also, browser support nowadays is very good: caniuse

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

For cross-browser compatibility for display: flexand align-items, you can use the following:

对于跨浏览器的兼容性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;

回答by Ariful Islam

You can easily do this by adding the following piece of CSS code:

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

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

That means your CSS finally looks like:

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

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

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

回答by BAR

For reference and to add a simpler answer:

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

Pure CSS:

纯 CSS：

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

Or as a SASS/SCSS Mixin:

或者作为 SASS/SCSS Mixin：

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

Use by:

使用人：

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

By Sebastian Ekstr?m's blog post Vertical align anything with just 3 lines of CSS:

作者：Sebastian Ekstr?m 的博客文章Vertical alignany with only 3 lines of CSS：

This method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:

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

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

We live in 2015+ and Flex Boxis supported by every major modern browser.

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

It will be the way websites are made from here on out.

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

Learn it!

学习它！

回答by ankitd

All credit goes to this link owner @Sebastian Ekstr?m Link; please go through this. See it in action codepen. By reading the above article I also created a demo fiddle.

所有功劳都归功于此链接所有者 @Sebastian Ekstr?m Link；请通过这个。在操作codepen 中查看它。通过阅读上面的文章，我还创建了一个演示小提琴。

With just three lines of CSS (excluding vendor prefixes) we can do it with the help of a transform: translateY vertically centers whatever we want, even if we don't know its height.

只需要三行 CSS（不包括供应商前缀），我们就可以在转换的帮助下完成： translateY 垂直居中我们想要的任何东西，即使我们不知道它的高度。

The CSS property transform is usually used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text, etc.

CSS 属性变换通常用于旋转和缩放元素，但通过其 translateY 函数，我们现在可以垂直对齐元素。通常这必须通过绝对定位或设置行高来完成，但这些要求您要么知道元素的高度，要么仅适用于单行文本等。

So, to do this we write:

所以，要做到这一点，我们写：

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

That's all you need. It is a similar technique to the absolute-position method, but with the upside that we don't have to set any height on the element or position-property on the parent. It works straight out of the box, even in Internet Explorer 9!

这就是你所需要的。这是一种与绝对位置方法类似的技术，但好处是我们不必在元素上设置任何高度或在父级上设置位置属性。它开箱即用，即使在Internet Explorer 9 中！

To make it even more simple, we can write it as a mixin with its vendor prefixes.

为了使它更简单，我们可以将其编写为带有供应商前缀的 mixin。

回答by MAChitgarha

Flexboxes that were introduced in CSS3 are the solution:

CSS3 中引入的 Flexbox 是解决方案：

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
p {
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

<section>
    <p>
        I'm a centered box!<br/>
        Flexboxes are great!
    </p>
</section>

Tip: Replace the line above which is marked as "Key Part" with one of these lines, if you want to center the text:

提示：如果要使文本居中，请将上面标记为“关键部分”的行替换为以下行之一：

1) Only vertically:

1) 仅垂直：

margin: auto 0;

2) Only horizontally:

2) 仅水平：

margin: 0 auto;

As I noticed, this trick works with grids (i.e. display: grid), also.

正如我所注意到的，这个技巧也适用于网格（即display: grid）。

回答by Jürg

Flexible approach

灵活的方法

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>

回答by Pranav Singh

The solution accepted as the answer is perfect to use line-heightthe same as the height of div, but this solution does not work perfectly when text is wrapped OR is in two lines.

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

Try this one if text is wrapped or is on multiple lines inside a div.

如果文本被换行或在 div 内的多行上，请尝试此方法。

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

For more reference, see:

更多参考请见：

• Vertically Center Multi-Lined Text

• 6 Methods For Vertical Centering With CSS

• 垂直居中多行文本

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

回答by Marco Allori

Try this solution:

试试这个解决方案：

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Built using CSS+.

使用CSS+构建。

回答by Akshay Pethani

You can use the following code snippet as the reference. It is working like a charm for me:

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

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Vertically Center Text</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body {
            display: table;
        }
        .centered-text {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body style="background:#3cedd5">
        <div class="centered-text">
            <h1>Yes, it's my landing page</h1>
            <h2>Under construction, coming soon!!!</h2>
        </div>
    </body>
</html>

The output of the above code snippet is as follow:

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