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

7977
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



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来