我如何垂直居中文本与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> 

什么是最好的方法来做到这一点?

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

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; } 
 <div> Hello World! </div> 

另一种方式(这里还没有提到)是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> 

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

作为参考和添加一个更简单的答案:

纯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的博客文章垂直alignment任何只有3行的CSS

这种方法可能会导致元素模糊,因为元素被放置在“半像素”上。 解决scheme是将其父元素设置为保留-3d。 如下所示:

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

我们生活在2015+,每个主stream的现代浏览器都支持Flex Box 。

这将是网站从这里出来的方式。

学习吧!

所有信贷去链接所有者@SebastianEkström 链接 ; 请通过这个。 在行动codepen看到它。 通过阅读上面的文章,我也创build了一个演示小提琴 。

只需三行CSS(不包括供应商前缀),我们可以借助一个转换来实现:即使我们不知道它的高度,translateY也会垂直居中。

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

所以,要做到这一点,我们写:

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

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

为了使它更简单,我们可以把它作为一个mixin与其供应商的前缀。

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

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

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

有关更多参考,请参阅:

  • 垂直居中多行文本

  • 6用CSS垂直居中的方法

灵活的方法

 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> 

在CSS3中引入的Flexbox是解决scheme:

 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; font-family: Calibri; } 
 <section> <p> I'm center!<br/> Flexboxes are great! </p> </section> 

试试这个解决scheme

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

您也可以使用下面的属性。

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

为了您所有的垂直alignment需求!

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

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

试试transform属性:

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

我只想扩大@michielvoo的答案,以释放线高和呼吸高度的需要。 基本上就是这样的简化版本:

 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> 

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

#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 (更容易更改结果帧的高度)。

如果要将内部文本放在HTML中,而不是放在CSS中,则需要将文本内容封装在附加内联元素中,并编辑#box::after以匹配它。 (当然, content:财产应该被删除。)
例如,
<div id="box"><span>TextContent</span></div>
在这种情况下#box::after应该被replace为#box span

对于IE8的支持,你必须用::replace::

简单而通用的方法是(如michielvoo表方法):

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

在父标签上使用这个属性(或等同的类)甚至可以让许多孩子alignment:

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

一个更好,更容易,反应迅速的方法是将CSS中的margin-top设置为45%左右:

 margin-top: 45%; 

你可能不得不使用这个号码,但它会在周围的分区的中心。

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

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

垂直alignment中心的一个非常简单和最强大的解决scheme:

 .outer-div { height: 100px; width: 200px; text-align: center; border: 1px solid #000; } .inner { position: relative; top: 45%; transform: translateY(-45%); color: red; } 
 <div class="outer-div"> <span class="inner">No data available</span> </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> 
 <!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> 

无论你想垂直居中风格意味着你可以尝试display:table-cellvertical-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> 
 .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> 

我需要一排可点击的大象,垂直居中,但没有使用表来解决一些Internet Explorer 9的怪异。 我最终find了最好的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> 

这是工作代码:

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

较新的浏览器现在支持CSS calcfunction。 如果你是针对这些浏览器,你可能想要做这样的事情:

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

尝试这个:

 .text-center { height: 200px; text-align: center; border: 2px dotted #ee944d; display: table-cell; vertical-align: middle; } 
 <div class="text-center"> 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> 
 .text{ background:#ccc; position:relative; float:left; text-align:center; width:400px; line-height:80px; font-size:24px; color:#000; float:left; }