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

Question

我有一个包含文本的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>

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

Answer 1

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

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

<div>
  Hello World!
</div>

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

一种更通用的方法

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

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

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS只是调整大小<div>,垂直居中<span>通过设置<div>'s line-height等于它的高度来对齐,并<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

使用绝对定位

这种技术使用绝对定位的元素设置顶部,底部,左侧和右侧为0.在Smashing Magazine,Absolute Horizo​​ntal And Vertical Centering In CSS中的文章中有更详细的描述.

Answer 2

另一种方式(此处尚未提及)是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 */
}

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

或者,不是通过容器对齐内容,当flex容器中只有一个flex项时,flexbox也可以使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;
}

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

注意:以上所有内容适用于将物品放置在水平行中时居中.这也是默认行为,因为默认情况下为flex-directionis 的值row.但是,如果flex-items需要在垂直列中进行布局,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;
  }

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

一个开始使用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;

Answer 3

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

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

这意味着你的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>

Answer 4

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

纯CSS:

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

或者作为SASS/SCSS Mixin:

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

使用者:

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

通过SebastianEkström的博客文章垂直对齐任何只有3行CSS:

由于元素被放置在"半像素"上,该方法可能导致元素模糊.对此的解决方案是将其父元素设置为preserve-3d.如下:

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

我们生活在2015年以上,每个主要的现代浏览器都支持Flex Box.

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

学习它!

Answer 5

一切归功于这个链接所有者@Sebastian埃克斯特罗姆链接 ; 请仔细阅读.看到它在行动codepen.通过阅读上面的文章,我还创建了一个演示小提琴.

只需三行CSS(不包括供应商前缀),我们就可以在变换的帮助下完成:即使我们不知道它的高度,translateY也可以垂直居中.

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

所以,为此,我们写道:

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

这就是你所需要的.它与绝对位置方法类似,但有了好处,我们不必在父元素上设置任何高度或者在父元素上设置position-property.即使在Internet Explorer 9中,它也能直接开箱即用!

为了使它更简单,我们可以将其作为mixin与其供应商前缀一起编写.

Answer 6

CSS 3中引入的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>

注意:如果要使文本居中,请将上面标记为重要的行替换为其中一行:

1)仅垂直:

margin: auto 0;

2)仅横向:

margin: 0 auto;

正如我所注意到的,这个技巧也适用于网格(显示:网格).

Answer 7

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

例子：

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

Answer 8

灵活的方法

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>

Answer 9

作为答案接受的解决方案完全与line-heightdiv的高度相同,但是当文本被包装时,此解决方案不能完美地工作或者是两行.

如果文本被包装或在div内的多行上尝试这个.

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

有关更多参考,请参阅:

• 垂直居中的多层文本

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

Answer 10

尝试此解决方案:

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

使用CSS +构建.

Answer 11

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

<!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>

上面代码段的输出如下:

源代码信用:如何使用CSS垂直居中文本？ - Code Puran

Answer 12

其他方式:

不要设置height属性div,而是padding:用来实现效果.与行高相似,只有在有一行文本时才有效.虽然这样,如果你有更多的内容,文本仍然会居中,但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
}

这将顶部和底部设置padding的div到60px,和左,右padding为零,使得div120个像素(加上你的字体的高度)高,且将在div垂直居中的文本.

Answer 13

您还可以使用以下属性.

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

Answer 14

这是使用flexbox的另一个选项。

的HTML

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

的CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

结果

Answer 15

简单而通用的方法是（如Michielvoo 的表方法）：

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

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

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

Answer 16

我不确定有人走过这writing-mode条路，但我认为它可以彻底解决问题并获得广泛支持：

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

当然，这将适合您需要的任何尺寸（超过父级的100％）。如果您取消注释边界线，则熟悉自己会有所帮助。

JSFiddle演示供您摆弄。

Caniuse支持：85.22％+ 6.26％= 91.48％（甚至Internet Explorer都在其中！）

Answer 17

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

当具有％的非固定相对高度时，可以使用它。#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:应该删除属性。）

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

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

Answer 18

满足您所有的垂直校准需求!

声明这个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();
}

Answer 19

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

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>