我如何垂直居中文本与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>
其他方式：
不要设置div的height属性，而是使用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-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>
.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; }
