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

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

<！--结束片段--&gt。

什么是最好的方法？

Peter Mortensen
已编辑的问题 26日 二月 2019 в 10:38
编程
html css vertical-alignment
14日 一月 2012 в 9:25
52 种观点
对该问题的评论 (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>
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>
评论(16)

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

只要在container元素中添加以下代码即可。

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

[Flexbox演示1][2]

<！--开始片段。 js hide.true --> -- begin snippet: js hide: true -->

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

<！--结束片段-->

另外，flexbox也可以通过[自动margin][3]当flex容器中只有一个flex项目时，而不是通过container*来对齐内容，flex项目中心（就像上面问题中给出的例子）。

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

[Flexbox演示2][4]

<！--开始片段。 js hide.true --> -- begin snippet: js hide: true -->

.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:以上所有内容都适用于在水平行中排列项目时将其居中。 这也是默认的行为，因为默认情况下，"flex-direction "的值是 "row"。 但是，如果flex-items需要以垂直列排列，那么`flex-direction: 列 "应该设置在容器上，将主轴设置为列，另外，"justify-content "和 "align-items "属性现在以 "justify-content: 居中 "垂直居中，"align-items: 居中 "水平居中)

[flex-direction.column演示][5]。 列`演示][5]

<！--开始片段。 js hide.true --> -- begin snippet: js hide: true -->

.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][6]开始。

另外，现在的浏览器支持也很好。 [caniuse][7]

为了使`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;

[1]: http://www.w3.org/TR/css3-flexbox/ [2]: http://jsfiddle.net/danield770/4rrL4/594/ [3]: https://www.w3.org/TR/css-flexbox-1/#auto-margins [4]: http://jsfiddle.net/danield770/4rrL4/815/ [5]: http://jsfiddle.net/danield770/4rrL4/888/ [6]: http://the-echoplex.net/flexyboxes/ [7]: http://caniuse.com/#feat=flexbox

评论(11)

你可以通过添加以下一段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>
评论(4)

供参考，并补充一个更简单的答案。

Pure 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%);
}

使用人：{{11969358}}

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

由Sebastian Ekström'的博客文章[只用3行CSS就能垂直对齐任何东西][1]。

这种方法会因为元素被放置在 "半像素 "上而导致元素模糊。 解决这个问题的方法是将其父元素设置为preservation-3d。 像下面这样。

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

我们生活在2015年以上，Flex Box被所有主流的现代浏览器所支持。

从此以后，它将成为网站的制作方式。

学习吧！

[1]: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ "Sebastian Ekström" 2:

评论(2)

所有功劳归本链接所有者@Sebastian Ekström[链接][1]。 请通过这个。 看它的操作[codepen][2]。 通过阅读上面的文章，我还制作了[演示提琴][3]。

只需要三行CSS（不包括厂商前缀），我们就可以借助变换来实现。 translateY将我们想要的东西垂直居中，即使我们不知道它的高度。

CSS属性transform通常用于旋转和缩放元素，但通过它的translateY功能，我们现在可以垂直对齐元素。 通常这必须通过绝对定位或设置行高来实现，但这些都需要你知道元素的高度，或者只对单行文字等有效。

所以，为了做到这一点，我们写

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

这就是你所需要的。 它是一种类似于绝对位置方法的技术，但是它的优点是我们不需要在元素上设置任何高度，也不需要在父元素上设置任何位置属性，它可以直接使用，甚至在[Internet Explorer 9][4]! 它可以直接使用，甚至在[Internet Explorer 9][4]中也可以使用!

为了使它更简单，我们可以将它与供应商的前缀一起写成一个 mixin。

[1]: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ [2]: http://codepen.io/sebastianekstrom/pen/kzEhe [3]: http://jsfiddle.net/hegvLmee/1/ [4]: http://en.wikipedia.org/wiki/Internet_Explorer_9

评论(1)

CSS3中引入的Flexboxes就是解决方案。

<！--开始片段。 js hide: false console: true babel: false -->

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

<！--结束片段-->

提示。 替换上面标记为"关键部分&quot.的一行，如果你想将文字居中，可以用以下一行替换："关键部分" 如果你想让文字居中，可以用下面的一行代替。

  1. 仅垂直方向。
margin: auto 0;

2）只能是横向的。

margin: 0 auto;

我注意到，这个技巧对网格有效（即 display: grid），也可以。

MAChitgarha
编辑本段答案28日 九月 2019 в 7:29
评论(2)

灵活的方法。

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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>

<！--结束片段-->

Peter Mortensen
编辑本段答案26日 二月 2019 в 10:55
评论(0)

被接受为答案的解决方案是完美的使用line-height与div的高度相同，但当文字被包裹或在两行中时，这个解决方案并不能完美地工作。

如果文字被包裹或在div内有多行，可以试试这个办法。

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

更多参考，请看。

  • [垂直居中多行文字][1]。

  • [用CSS实现垂直居中的6种方法][2]。

[1]: https://css-tricks.com/vertically-center-multi-lined-text/ [2]: http://www.vanseodesign.com/css/vertical-centering/

评论(0)

试试这个解决方案。

<！--开始片段。 js hide: false -->

.EXTENDER { 位置： 绝对： top: 0px; 左：0px。 下方：0px; 左：0px; 下方：0px 0px; 右：0px; 下：0px。 右：0px。 宽度： 100%; 高度: 100%; 臀部: 0px; 右边: 0px; 宽度: 100%; 高度: 100%。 100%; overflow-y: 隐藏。 溢出-x: 隐藏。 }

.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+][2]构建。

1:

[2]: http://www.css.plus

评论(0)

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

-- begin snippet: js hide: false console: true

false -->




        Vertically Center Text

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body {
            display: table;
        }
        .centered-text {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }



        <div class="centered-text">
            <h1>Yes, it's my landing page</h1>
            <h2>Under construction, coming soon!!!</h2>
        </div>

<！--结束代码段-->

以上代码片段的输出如下。

[![在此输入图片描述][1]][1] 。

[1]: https://i.stack.imgur.com/q9DkN.png [2]: https://www.codepuran.com/web-designing/vertically-horizontally-align-text-div/

Akshay Pethani
编辑本段答案22日 十月 2019 в 5:49
评论(0)

另一种方式。

不要设置height 属性的div，而是使用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中。

Peter Mortensen
编辑本段答案26日 二月 2019 в 10:57
评论(0)

您也可以使用以下属性。

display: flex; 
align-content: center; 
justify-content : center;
评论(1)

这里是另一个使用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;
  }

结果

[！[在此输入图像描述][1]][1]

[1]: https://i.stack.imgur.com/6d5Tv.png

Peter Mortensen
编辑本段答案26日 二月 2019 в 11:15
评论(0)

我'不确定是否有人走过 "写模式 "的路线，但我认为它能干净利落地解决这个问题，并且得到广泛的支持。

<！--开始片段。 js hide: false console: false babel.false --> -- begin snippet: js hide: false console: false false -->

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>
.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;
}

<！--结束片段-->

当然，这将适用于你所需要的任何尺寸（除了100%的父尺寸）。 如果你把边框线取消注释，熟悉一下会很有帮助。

JSFiddle演示][1]给你摆弄一下。

Caniuse支持][2]。 85.22%+6.26%=91.48%（连Internet Explorer都在！）。

[1]: http://jsfiddle.net/Neithan/gudgd26v/ [2]: http://caniuse.com/#feat=css-writing-mode

Peter Mortensen
编辑本段答案26日 二月 2019 в 11:09
评论(0)

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

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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>

<！--结束片段-->

评论(0)

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

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

对于单行文本（或单个字符），你可以使用这种技术。

当#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][2]（更容易改变结果框的高度）。

如果你想把内部文本放在HTML中，而不是CSS中，那么你需要把文本内容包裹在额外的inline元素中，并编辑#box::after以匹配它。(当然，content:属性也应该被删除）。)

比如说 <div id="box"><span>TextContent</span></div>"。 在这种情况下，#box::after应该被替换成#box span`。

对于Internet Explorer 8的支持，你必须用:替换:。

评论(1)

试试变换属性。

-- begin snippet: js hide: false console: true

false -->

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<！--结束片段-->

评论(0)

简单而通用的方法是（如[Michielvoo'的。 表的方法][1]）。)

[ctrv]{
    display:table !important;
}

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

在父标签上使用这个属性（或等价的类），即使对许多子标签也能对齐。

[1]: https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css/8865463#8865463

评论(0)

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

<！--开始片段。 js hide: false -->

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>

<！--结束片段-->

评论(2)