题 如何使用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>

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


1811
2018-01-14 21:25


起源


可能重复 如何使用css垂直居中文本 - leonbloy
可能重复 在页面上垂直和水平居中<div>的最佳方法是什么? - Dan Dascalescu
W3C参考: w3.org/Style/Examples/007/center.en.html - nu everest
现代方式:使用 柔性 - Mistalis
此页面上的代码段将适用于您: codepuran.com/web-designing/... - Akshay Pethani


答案:


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

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>它的线高等于它的高度,并使其成为 <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的文章中有更详细的描述, CSS中的绝对水平和垂直居中


2452
2018-03-06 08:15



因为如果div或文本更改或添加更多内容会出错。 - Rob
但这就是他所说的,如果你知道你将使用多少文本完全可以接受......下面的解决方案更灵活 - acSlater
只有第3种方法在我的Firefox 22.0上运行良好,但它并不适用于所有浏览器。一旦我改变div的高度大小,前两种方法就会停止正常工作 - YMC
如何在div的高度设置为“高度:100%;”时实现相同的目标? - Fedor
该 table-cell 技术很酷,但内容然后调整大小以适应父容器。这是来自CSS Tricks的一种非常棒的技术,使用伪元素 before: css-tricks.com/centering-in-the-unknown 。内容未按此方式调整大小,但仅适用于IE8 +。 - Ian Campbell


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

或者,而不是通过对齐内容 容器,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;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

注意: 以上所有内容适用于将物品放入中心时对中物品 水平行。这也是默认行为,因为默认情况下为 flex-direction 是 row。但是,如果需要布置flex项目 垂直列, 然后 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 

此外,如今的浏览器支持非常好: 我可以用吗

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

960
2018-01-14 21:29



Flexbox支持表 - user
当div占据屏幕的整个宽度时,这很有效 - Andrew Bringaze
这对我也很有效,上面的其余部分在我的网站上不起作用。但是视觉工作室不承认 display: flex。 - Antonio Ooi
IE =我们永远不会有好东西 - Andrew Hoffman
这是炸弹!!!!这就像Chrome和Android Chrome浏览器中的老板一样。 - Frank


您可以通过添加以下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>


110
2017-10-25 18:12



但是看起来像是会杀死边距属性。 - Tim
请注意,此解决方案不支持IE7 - mrtsherman
@mrtsherman或者说,IE7不支持此解决方案。 ;-) - James McLaughlin
@Costa - 你可能还要浮动父div,如果你在这个div中漂浮一些东西......退房 stackoverflow.com/questions/2062258/... - Ian Campbell
它禁用 min-heigth。 - Penguin


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

纯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 每个主要的现代浏览器都支持。

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

学习它!


97
2017-08-11 11:59



纯CSS:为我做了诀窍,但我不得不使用 absolute 定位.. - d4Rk
我和@ d4Rk有同样的问题。我的(块)容器具有相对定位和高度,并且需要垂直居中的项目(图像)必须绝对定位。多么复杂/简单的问题!这里希望在下一版本的CSS中有一个简单/简单的修复。 - Vanessa King


所有信用都归于此链接所有者@SebastianEkström 链接;请仔细阅读。看到它在行动 codepen。通过阅读上面的文章,我也创建了 一个演示小提琴

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

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

所以,为此,我们写道:

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

这就是你所需要的一切。这是一种与绝对位置方法类似的技术,但我们不需要在父元素上设置任何高度或者在父元素上设置position-property。它开箱即用,即使在 Internet Explorer 9的

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


49
2017-12-13 20:09



我做了最小的测试,但似乎对我有用! - Iain Collins
改变它在整个地方移动的字体大小 - Jon49


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

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

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

1)仅垂直:

margin: auto 0;

2)仅横向:

margin: 0 auto;

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


22
2017-08-28 10:11



你能解释一下为什么flex在这个案例中以段落为中心有这种效果吗? - elena
@elena事实上,我不知道为什么,我在尝试时发现了。但是,对于较新版本的CSS,这将是一个考虑因素。例如,如果在这种情况下将显示更改为网格,则它将与flexbox一样工作。我认为网格和flexboxes带有新功能来补偿以前的CSS故障;而这个伎俩就是其中之一。 - MAChitgarha


灵活的方法

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>


13
2018-06-29 09:26





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

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

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

有关更多参考,请参阅:


13
2018-04-15 08:28





您还可以使用以下属性。

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

9
2017-12-01 18:06



谢谢'satwik boorgula',我不认为你的代码有问题,也许我的代码中存在一些冲突。我用这段代码测试:<div id =“topper”class =“container”> <span>你的内容!</ span> </ div>但它可以通过使用代码修复为上面提到的'michielvoo'。 - Masa S-AiYa


尝试 这个解决方案

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


9
2018-05-28 07:41





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

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

上面代码段的输出如下:

Enter image description here

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


8
2017-09-28 18:07