提问



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



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




div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>



另一种方式(此处尚未提及)是Flexbox。[84]


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


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>



您可以通过添加以下CSS代码轻松完成此操作:[85]


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>



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


纯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 :[86]


由于元素被放置在半像素上,该方法可能导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下:


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


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


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


了解它!

最佳参考


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


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


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


所以,为此,我们写道:


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


这就是你所需要的一切。这是一种与绝对位置方法类似的技术,但我们不需要在父元素上设置任何高度或者在父元素上设置position-property。它可以直接开箱即用,即使在互联网资源管理器中也是如此![91]


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

其它参考1


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>



灵活的方法




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>



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


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


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


有关更多参考,请参阅:



  • 垂直居中的多层文字 [92]

  • 使用CSS进行垂直居中的6种方法 [93]


其它参考2


您还可以使用以下属性。


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

其它参考3


试试这个解决方案:[94]




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



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




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



其他方式:


不要设置divheight属性,而是使用padding:来实现效果。与行高相似,它只适用于有一行文本。这样,如果你有更多的内容,文本仍然会居中,但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 120px(加上字体的高度)高,并将文本垂直居中放在div中。

其它参考4


满足您的垂直对齐需求!


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

其它参考5


我不确定是否有人走过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>



尝试转换属性:




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



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




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



无论屏幕大小或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>



对于单行文本(或单个字符),您可以使用此技术:


#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(更容易更改结果框架的高度)。[95] [96]


如果要将内部文本放在HTML中而不是CSS中,则需要将文本内容包装在其他内联元素中,然后编辑#box::after以匹配它。 (当然,应该删除content:属性。)

例如,

<div id="box"><span>TextContent</span></div>,点击
在这种情况下,#box::after应该替换为#box span


对于IE8支持,您必须用:替换::

其它参考6


简单而通用的方式是(作为michielvoo表方法):


[ctrv]{
    display:table !important;
}

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


在父标记上使用此属性(或等效类)甚至可以使许多子对齐:


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

其它参考7


我想延长@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>



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


例:


div{ display:flex; align-item:center;}

其它参考8


请尝试以下代码:


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>



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




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>



我需要一排可点击的大象,垂直居中,但没有使用桌子来绕过一些互联网  Explorer  9怪异。


我最终找到了最好的CSS(根据我的需要),并且它非常适合Firefox,Chrome和Internet 资源管理器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>



如果您不关心它的小视觉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>



一种更好,更简单,响应更快的方法是将CSS中的margin-top设置为45%左右:


margin-top: 45%;


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

其它参考9


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


在元素的CSS属性中添加这个小代码。太棒了。尝试一下!

其它参考10


较新的浏览器现在支持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>



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