如何使用 CSS 垂直居中文本？ [复制]

Posted 2023-03-05

技术标签:

【中文标题】如何使用 CSS 垂直居中文本？ [复制]【英文标题】：How do I vertically center text with CSS? [duplicate] 【发布时间】：2012-02-10 12:50:44 【问题描述】：

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

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

【问题讨论】：

#boxline-height: -moz-block-height; 你可以使用vertical-align: middle; 【参考方案1】：

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

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 只是调整<div> 的大小，通过将<div> 的行高设置为等于其高度，垂直居中对齐<span>，并使<span> 与vertical-align: middle 成为内联块。然后它将<span> 的行高设置为正常，因此其内容将在块内自然流动。

模拟表格显示

这是另一个选项，它可能不适用于较旧的browsers that don't support display: table and 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>

使用绝对定位

此技术使用绝对定位元素，将顶部、底部、左侧和右侧设置为 0。在 Smashing Magazine 的一篇文章中进行了更详细的描述，Absolute Horizontal And Vertical Centering In CSS。

div 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;

<div>
  <span>Hello World!</span>
</div>

【讨论】：

因为如果 div 或 text 改变或添加更多内容就会出错。但这就是他所说的，如果你知道你将使用多少文本，它完全可以接受......但是下面的解决方案更加灵活 "padding:0" 可能也需要在第一个选项中【参考方案2】：

另一种方式（此处尚未提及）是使用Flexbox。

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

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

Flexbox demo 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 项 与 auto margin 居中弹性容器中的项目（如上面问题中给出的示例）。

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

Flexbox Demo 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-direction: column 以将主轴设置为列，另外还要设置 justify-content 和 align-items属性现在以相反的方式工作，justify-content: center 垂直居中，align-items: center 水平居中）

`flex-direction: column` demo

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

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;

【讨论】：

Flexbox support table 当某些文本为 1 行而其他文本为 2 行时，或者任何时候您有不同的高度元素时，这非常有效。对我来说最好的答案。【参考方案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>

【讨论】：

看起来这会杀死边距属性。【参考方案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;

来自 Sebastian Ekström 的博文Vertical align anything with just 3 lines of CSS：

由于元素被放置在“半像素”上，这种方法会导致元素模糊。解决方案是将其父元素设置为 preserve-3d。如下：

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

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

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

学习吧！

【讨论】：

【参考方案5】：

所有功劳归此链接所有者@Sebastian Ekström Link；请通过这个。在行动中看到它codepen。通过阅读上述文章，我还创建了a demo fiddle。

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

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

因此，为此我们编写：

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

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

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

【讨论】：

这对我有用，即使是文本和图像组合也【参考方案6】：

CSS3 flexbox 有一个小小的魔力：

/* Important */
section 
    display: flex;
    display: -webkit-flex;

section p 
    /* Key Part */
    margin: auto;



/* Unimportant, coloring and UI */
section 
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;

section p 
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;

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

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

仅垂直：

margin: auto 0;

仅水平方向：

margin: 0 auto;

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

【讨论】：

您能否解释一下为什么在这种情况下 flex 会对段落居中产生这种影响？ @elena 其实我也不知道具体原因，我在尝试的时候发现了。但是，这将是较新版本的 CSS 的考虑因素。例如，如果在这种情况下将显示更改为网格，它将与弹性框一样工作。我认为网格和 flexbox 带有新特性来弥补 CSS 之前的缺陷；而这个技巧就是其中之一。请不要进行只会影响帖子或线程的更改。对帖子的编辑，即使是您自己的，也应该是实质性的。 @TylerH 对不起，我不太明白你的意思。为什么要撞？！虽然这不是一个很好的理由，但我已经看到了很多微小的编辑。例如，请参阅下面帖子的最新编辑。另外，请查看this。我不明白它会产生什么重大（甚至是次要）影响。另外，即使我们认为您是正确的，对整个答案投反对票也是对此类行为的不良反应。 @MAChitgarha 这与编辑 suggestions 无关；这里的问题是您的更改不会对内容产生任何影响/改进；所做的编辑只是为了“碰撞”帖子。另外，我不确定您在谈论什么关于否决票。【参考方案7】：

灵活的方法

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>

【讨论】：

【参考方案8】：

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

例子：

div  display:flex; align-items:center;

【讨论】：

【参考方案9】：

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

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

#box

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

更多参考请见：

Vertically Center Multi-Lined Text

6 Methods For Vertical Centering With CSS

【讨论】：

【参考方案10】：

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

#container 
  display: flex;
  height: 200px;
  background: orange;


.child 
  margin: auto;

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

结果

这是一篇关于在 css 中居中的精彩文章。 Check it out.

【讨论】：

【参考方案11】：

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

使用CSS+构建。

【讨论】：

【参考方案12】：

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

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>

上述代码sn-p的输出如下：

【讨论】：

【参考方案13】：

您还可以使用以下属性。

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

【讨论】：

谢谢'satwik boorgula'，我不认为你的代码有问题，也许我的代码有冲突。我用这个代码测试： Your Content! 但它可以通过使用上面提到的'michielvoo'的代码来修复。【参考方案14】：

另一种方式：

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

【讨论】：

【参考方案15】：

我不确定是否有人走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 demo给你摆弄。

Caniuse support: 85.22% + 6.26% = 91.48%（连 Internet Explorer 都在里面！）

【讨论】：

【参考方案16】：

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

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

【讨论】：

效果很好。只是给一些读者的评论：这段代码是Sass。【参考方案17】：

对此有更好的主意。你也可以这样做

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>

【讨论】：

【参考方案18】：

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

它可以在#box具有非固定的相对高度（%）时使用。

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

#box::before 
    display: block;
    content: "";
    height: 50%;


#box::after 
    vertical-align: top;
    line-height: 0;
    content: "TextContent";

查看at JsBin（更容易编辑 CSS）或JsFiddle（更容易更改结果框架的高度）的现场演示。

如果您想在 HTML 中而不是 CSS 中放置内部文本，那么您需要将文本内容包装在附加的 inline 元素中并编辑 #box::after 以匹配它。（当然，content: 属性应该被移除。）

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

要获得 Internet Explorer 8 支持，您必须将 :: 替换为 :。

【讨论】：

在此处描述的所有方法中，您的方法是唯一具有魔力的方法。我的案例：一个 div 有一个 span 元素和一个使用 css 的旋转时钟图标（用于加载层）。我刚刚删除了#box::after 的“TextContent”（将属性保留为空字符串），就是这样。【参考方案19】：

试试变换属性：

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

【讨论】：

【参考方案20】：

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

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

【讨论】：

但这不是垂直居中.... 如果你改变“top: 45%;”到“顶部：50%；”。刚试了用一、二、三线围成一圈，中心就完美对齐了。【参考方案21】：

以下代码无论屏幕大小或div大小如何，都会将div放在屏幕中间：

.center-screen 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

查看有关flex here 的更多详细信息。

【讨论】：

【参考方案22】：

简单而通用的方法是（如Michielvoo's table approach）：

[ctrv]
    display:table !important;


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

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

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

【讨论】：

【参考方案23】：

试试下面的代码：

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

div 
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

【讨论】：

【参考方案24】：

我只想扩展 the answer from Michielvoo 以释放对行高和 div 高度呼吸的需求。它基本上只是一个这样的简化版本：

div 
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;


span 
  display: inline-block;
  vertical-align: middle;
  line-height: normal;

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

注意：fixed-height 需要注释掉 css 的一部分，而包含 div。

【讨论】：

【参考方案25】：

我需要一排可点击的大象，垂直居中，但不使用表格来解决 Internet Explorer 9 的一些奇怪问题。

我最终找到了最好的 CSS（满足我的需要），它与 Firefox、Chrome 和 Internet Explorer 11 配合得很好。遗憾的是 Internet Explorer 9 仍在嘲笑我...

div 
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;


span 
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;


.out 
  border: 3px solid silver;
  display: inline-block;

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

显然你不需要边框，但它们可以帮助你了解它是如何工作的。

【讨论】：

【参考方案26】：

可以使用CSS中的定位方式：

Check the result here....

HTML：

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS：

.relativedivposition:relative;border:1px solid #ddd;height:300px;width:300px
.relativediv pposition:absolute:top:50%;transfrom:translateY(-50%);

希望你也用这个方法。

【讨论】：

【参考方案27】：

无论你想要垂直居中的风格意味着你可以尝试display:table-cell 和vertical-align:middle。

示例：

#box

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

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

【讨论】：

【参考方案28】：

如果您不关心它的视觉 3D 效果，请将其设置为 button 而不是 div。

#box

  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

【讨论】：

【参考方案29】：

绝对定位和拉伸

与上面的方法一样，首先将父元素和子元素的定位分别设置为相对和绝对。从那里开始有所不同。

在下面的代码中，我再次使用此方法将子元素水平和垂直居中，但您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent position: relative;
#child 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;

这种方法的想法是通过将顶部、底部、右侧和左侧的值设置为 0 来尝试让子元素拉伸到所有四个边缘。因为我们的子元素小于父元素，所以它可以' t 到达所有四个边缘。

然而，将 auto 设置为所有四个边的边距会导致相反的边距相等，并将我们的子 div 显示在父 div 的中心。

很遗憾，上述方法在 Internet Explorer 7 及以下版本中不起作用，并且与之前的方法一样，子 div 内的内容可能会变得太大，导致其被隐藏。

【讨论】：

【参考方案30】：

.elementposition: relative;top: 50%;transform: translateY(-50%);

在元素的 CSS 属性中添加这个小代码。太棒了。试试看！

【讨论】：

以上是关于如何使用 CSS 垂直居中文本？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 flexbox 垂直居中文本？ [复制]

如何在列内垂直和水平居中文本？ [复制]

CSS：水平和垂直居中文本？ [复制]

如何仅使用 CSS 在 HTML 中垂直居中文本

css如何设置文本在li元素中垂直居中显示

如何在图像旁边垂直居中文本？ [复制]

如何使用 CSS 垂直居中文本？ [复制]

更通用的方法

模拟表格显示

使用绝对定位

Flexbox demo 1

Flexbox Demo 2

flex-direction: column demo

结果

`flex-direction: column` demo