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>，并使<span>为vertical-align: middle带<span>的内联块。然后它将行高设置为div { display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; } span { display: table-cell; vertical-align: middle; }的正常值，因此其内容将在块内自然流动。

模拟表格显示

这是另一个选项，可能不适用于较旧的browsers that don't support display: table and display: table-cell（基本上只是Internet Explorer 7）。使用CSS我们模拟表行为（因为表支持垂直对齐），HTML与第二个示例相同：

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

{{1}}

使用绝对定位

此技术使用绝对定位的元素设置top，bottom，left和right为0.在Smashing Magazine的文章 Absolute Horizontal And Vertical Centering In CSS 中有更详细的描述。

Answer 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也可以将弹性项与auto margin 对齐Flex容器中的一个flex项目（如上面问题中给出的示例）。

因此，要将flex项目水平和垂直居中，只需使用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项，则应在容器上设置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>

开始使用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的博客文章 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。

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

了解它！

Answer 5

所有信用均归该链接所有者@SebastianEkströmLink;请仔细阅读。在行动codepen中查看。通过阅读上面的文章，我还创建了a demo fiddle。

只有三行CSS（不包括供应商前缀），我们可以在变换的帮助下完成：translateY垂直居中，无论我们想要什么，即使我们不知道它的高度。

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

所以，为此，我们写道：

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

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

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

Answer 6

CSS 3中引入的Flexbox是解决方案：

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

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

注意：如果您想将文字居中，请将上面标有重要一行的行替换为其中一行：

1）仅垂直：

margin: auto 0;

2）仅横向：

margin: 0 auto;

正如我所注意到的，这个技巧也适用于网格（显示：网格）。

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

Answer 8

作为答案接受的解决方案非常适合使用与{div}的高度相同的line-height，但是当文本被包装时，此解决方案无法正常工作或者是两行。

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

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

有关更多参考，请参阅：

Answer 9

尝试this solution：

＆＃13;

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

＆＃13;

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

＆＃13;

使用CSS+构建。

Answer 10

您还可以使用以下属性。

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

Answer 11

另一种方式：

不要设置height的{{1}}属性，而是使用div来实现效果。与行高相似，只有在有一行文本时才有效。虽然这样，如果你有更多的内容，文本仍然会居中，但div本身会略大。

所以不要选择：

padding:

你可以说：

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 120像素（加上字体的高度）高，并将文本垂直居中放在div中。

Answer 12

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

＆＃13;

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

＆＃13;

以上代码段的输出如下：

源代码来源： How do I vertically center text with CSS? - Code Puran

Answer 13

这是使用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 14

更好的想法。你也可以这样做

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>

Answer 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！）

Answer 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();
}

Answer 17

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

当#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中，则需要将文本内容包装在其他内联元素中，然后编辑#box::after以匹配它。（当然，应删除content:属性。）

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

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

Answer 18

简单而通用的方式是（如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>

Answer 19

我看到了之前的答案，它们只适用于那个屏幕宽度（没有响应）。对于响应，您必须使用flex。

示例：

data Vec a = Vec [Integer] deriving Show
let u = Vec [1, 2, 3]
let v = Vec [2, 4, 5]

<u, v> = inner product of u and v

Answer 20

非常简单＆amp;垂直对齐中心的最强大解决方案：

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

Answer 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的详细信息。

Answer 22

请尝试以下代码：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 23

尝试转换属性：

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

Answer 24

我需要一排可点击的大象，垂直居中，但不使用桌子来解决一些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>

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

Answer 25

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：封闭css的{{1}}需要注释掉fixed-height的部分内容。

Answer 26

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 27

这很容易而且很简短：

.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}

<div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div>

Answer 28

您可以在CSS中使用定位方法：

Check the result here....

HTML：

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

CSS：

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

希望您也使用此方法。

Answer 29

只要您想要垂直居中的风格，就可以尝试display:table-cell和vertical-align:middle。

示例：

＆＃13;
＆＃13;
#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; }
＆＃13;
<div Id="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
＆＃13;
＆＃13;
＆＃13;

Answer 30

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

Answer 31

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>

Answer 32

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

在元素的CSS属性中添加此小代码。太棒了。试试吧！

Answer 33

绝对定位和拉伸

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

在下面的代码中，我再次使用此方法在水平和垂直方向上对孩子进行居中，尽管您只能将方法用于垂直居中。

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，尝试使子元素延伸到所有四个边缘。因为我们的子元素小于父元素，所以可以不能到达所有四个边缘。

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

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

Answer 34

较新的浏览器现在支持CSS calc功能。如果您要定位这些浏览器，则可能需要考虑执行以下操作：

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

关键是在绝对或相对定位的父div中使用style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;"。

Answer 35

更好，更简单，更快速的方法是将CSS中的margin-top设置为45％左右：

margin-top: 45%;

您可能必须使用该数字，但它将位于周围div的中心。

Answer 36

This效果很好。

您必须使用表格样式作为内容的div和center align。

Answer 37

这是工作代码：

＆＃13;

body{
  margin:0;
}
div {
  height: 80px;
  background: #171717;
  font-size: 24px;
  text-align: center;
  font-style: normal;
  color: #FFF;
  margin-top: 18px;
  margin-left: 4px;
  line-height: 80px;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Align text vertically center in div using CSS</title>
  </head>

  <body>
    <div>
      <span><a class="btn" href="http://ownanswers.com/"
               rel="dofollow">OwnAnswers.com</a>
      </span>
      For asking your questions, visit this site.
    </div>
  </body>
</html>

＆＃13;

<强>结果

Answer 38

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

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

38 个答案:

更通用的方法

模拟表格显示

使用绝对定位

Flexbox demo 1

Flexbox Demo 2

`flex-direction: column` demo

HTML

CSS

结果

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

38 个答案:

更通用的方法

模拟表格显示

使用绝对定位

Flexbox demo 1

Flexbox Demo 2

flex-direction: column demo

HTML

CSS

结果

`flex-direction: column` demo