如何垂直对齐div中的文本？
Posted
技术标签:
【中文标题】如何垂直对齐div中的文本？【英文标题】：How do I vertically align text in a div? 【发布时间】：2016-11-22 11:14:03 【问题描述】：我正在尝试找到将文本与 div 对齐的最有效方法。我已经尝试了一些东西，但似乎都没有。
.testimonialText
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>【问题讨论】：
这个网址有一个例子：http://css-tricks.com/vertically-center-multi-lined-text/. ***.com/questions/5703552/… ***.com/questions/8865458/… css-tricks.com/centering-css-complete-guide 【参考方案1】：在现代浏览器中执行此操作的正确方法是使用 Flexbox。
详情请见this answer。
有关在旧浏览器中工作的一些旧方法，请参见下文。
CSS 中的垂直居中 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
文章摘要：
对于 CSS 2 浏览器，可以使用 display:table/display:table-cell 将内容居中。
也可以通过JSFiddle 获得样品：
div border:1px solid green;<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>可以将旧浏览器 (Internet Explorer 6/7) 的 hack 合并到样式中，使用 # 隐藏新浏览器的样式：
div border:1px solid green;<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=
"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
everything is vertically centered
</div>
</div>
</div>【讨论】：
很可笑的是，表格被视为一种只有新手才会使用的老式 hack，而这里我们在 DIV 中使用“display:table-cell”作为一个更 hackier解决方法。 @Desty 在我开始研究可访问性之前，我也是这么想的。直到我看到屏幕阅读器如何做他们的事情，我才开始接受这种“新”的思维方式。【参考方案2】：您需要添加line-height 属性，并且该属性必须与div 的高度匹配。在你的情况下：
.center
height: 309px;
line-height: 309px; /* same as height! */
<div class="center">
A single line.
</div>事实上，您可以完全删除height 属性。
这仅适用于一行文本，所以要小心。
【讨论】：
我相信只有在 div 中有一行文本时才有效。 当然，如果文本超过 1 行，您的文本中的行距就会很疯狂。【参考方案3】：您可以通过将显示设置为“table-cell”并应用vertical-align: middle;：
display: table-cell;
vertical-align: middle;
根据我未经许可从http://www.w3schools.com/cs-s-ref/pr_class_display.asp 复制的这段摘录，并非所有版本的 Internet Explorer 都支持此功能。
注意：值“inline-table”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、 Internet Explorer 7 及更早版本不支持“table-row”、“table-row-group”和“inherit”。 Internet Explorer 8 需要 !DOCTYPE。 Internet Explorer 9 支持这些值。
下表还显示了来自http://www.w3schools.com/cs-s-ref/pr_class_display.asp 的允许显示值。
【讨论】：
【参考方案4】：这是一个很好的资源
来自http://howtocenterincss.com/：
在 CSS 中居中是一件令人头疼的事情。取决于各种因素，似乎有无数种方法可以做到这一点。这将整合它们并为您提供每种情况所需的代码。
使用弹性盒
为了让这篇文章与最新技术保持同步，这里有一种使用 Flexbox 使内容居中的更简单的方法。 Internet Explorer 9 及更低版本不支持 Flexbox。
这里有一些很棒的资源：
A guide to Flexbox Centering elements with Flexbox Internet Explorer 10 syntax for Flexbox Support for FlexboxJSFiddle with browser prefixes
li
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
/* Column | row */
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>另一种解决方案
This is from zerosixthree and lets you center anything with six lines of CSS
Internet Explorer 8 及更低版本不支持此方法。
jsfiddle
p
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>上一个答案
一种简单且跨浏览器的方法，非常有用，因为标记答案中的链接有些过时了。
如何在不使用 JavaScript 或 CSS 行高的情况下在无序列表和 div 中垂直和水平居中文本。无论您有多少文本，您都不必将任何特殊类应用于特定列表或 div（每个代码都相同）。这适用于所有主要浏览器，包括 Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera 和 Safari。由于现代浏览器所没有的 CSS 限制，有两个特殊的样式表（一个用于 Internet Explorer 7，另一个用于 Internet Explorer 6）来帮助他们。
Andy Howard - How to vertically and horizontally center text in an unordered list or div
由于我在上一个项目中不太关心 Internet Explorer 7/6，因此我使用了一个稍微精简的版本（即删除了使其在 Internet Explorer 7 和 6 中工作的内容）。它可能对其他人有用...
JSFiddle
.outerContainer
display: table;
width: 100px;
/* Width of parent */
height: 100px;
/* Height of parent */
overflow: hidden;
.outerContainer .innerContainer
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
li
background: #ddd;
width: 100px;
height: 100px;
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
</ul>【讨论】：
【参考方案5】：如果您需要使用 min-height 属性，您必须添加此 CSS：
.outerContainer .innerContainer
height: 0;
min-height: 100px;
【讨论】：
【参考方案6】：尝试嵌入表格元素。
<div>
<table style='width:200px; height:100px;'>
<td style='vertical-align:middle;'>
copenhagen
</td>
</table>
</div>【讨论】：
表格仅用于处理表格数据。绝不应该使用它们来解决布局问题。 关于表格的好处是，它们总是一致的 - CSS 被解释了很多不同的方式，并且将嵌套的 DIV 放入只是为了完成一些简单的事情会增加额外的 HTML（和混乱）。 CSS 仍然存在严重缺陷 是的，不幸的是，这仍然是垂直对齐块中（未知）文本的唯一可靠方法。为什么 CSS 大神如此讨厌 valign ？ （所有浏览器都可以始终如一地做到这一点 - 但仅限于表格单元格）【参考方案7】：我使用以下方法可以轻松地将随机元素垂直居中：
HTML：
<div style="height: 200px">
<div id="mytext">This is vertically aligned text within a div</div>
</div>
CSS：
#mytext
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
这会将我的 div 中的文本居中到 200 像素高的外部 div 的确切垂直中间。请注意，您可能需要使用浏览器前缀（例如我的情况下为 -webkit-）才能使此功能适用于您的浏览器。
这不仅适用于文本，也适用于其他元素。
【讨论】：
【参考方案8】：嗯，显然有很多方法可以解决这个问题。
但是我有一个绝对定位的<div>，height:100%（实际上，top:0;bottom:0 和固定宽度）和display:table-cell 只是无法垂直居中文本。我的解决方案确实需要一个内部 span 元素，但我看到许多其他解决方案也需要，所以我不妨添加它：
我的容器是.label，我希望数字在其中垂直居中。我通过绝对定位top:50% 并设置line-height:0 来做到这一点
<div class="label"><span>1.</span></div>
CSS如下：
.label
position:absolute;
top:0;
bottom:0;
width:30px;
.label>span
position:absolute;
top:50%;
line-height:0;
查看实际操作：http://jsfiddle.net/jcward/7gMLx/
【讨论】：
很好，因为它是最简单的解决方案。缺点是它仅适用于单行文本，请参阅带有较长文本的示例的分叉。 jsfiddle.net/6sWfw【参考方案9】：有一种更简单的方法可以垂直对齐内容，而无需借助表格/表格单元格：
http://jsfiddle.net/bBW5w/1/
在其中我添加了一个不可见的 (width=0) div，它假定容器的整个高度。
它似乎可以在 Internet Explorer 和 Firefox（最新版本）中使用。我没有检查其他浏览器
<div class="t">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
<div></div>
</div>
当然还有 CSS：
.t, .t > div:first-child
border: 1px solid green;
.t
height: 400px;
.t > div
display: inline-block;
vertical-align: middle
.t > div:last-child
height: 100%;
【讨论】：
【参考方案10】：检查这个简单的解决方案：
HTML
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
CSS
.block-title
float: left;
display: block;
width: 100%;
height: 88px
.block-title h3
display: table-cell;
vertical-align: middle;
height: inherit
JSFiddle
【讨论】：
【参考方案11】：这是div 模式中div 的另一种变体，在CSS 中使用calc()。
<div style="height:300px; border:1px solid green;">
Text in outer div.
<div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
Text in inner div.
</div>
</div>
这行得通，因为：
position:absolute 用于在 div 中精确放置 div
我们知道内部div 的高度，因为我们将其设置为20px。
calc(50% - 10px) 用于 50% - 高度的一半 用于居中内部 div
【讨论】：
父 div 需要 position: relative【参考方案12】：HTML
<div class="relative"><!--used as a container-->
<!-- add content here to to make some height and width
example:<img src="" > -->
<div class="absolute">
<div class="table">
<div class="table-cell">
Vertical contents goes here
</div>
</div>
</div>
</div>
CSS
.relative
position: relative;
.absolute
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
.table
display: table;
height: 100%;
width: 100%;
text-align: center;
color: #fff;
.table-cell
display: table-cell;
vertical-align: middle;
【讨论】：
【参考方案13】：现在（我们不再需要 Internet Explorer 6-7-8）我只会使用 CSS display: table 来解决这个问题（或 display: flex）。
对于旧版浏览器：
表：
.vcenter
display: table;
background: #eee; /* optional */
width: 150px;
height: 150px;
text-align: center; /* optional */
.vcenter > :first-child
display: table-cell;
vertical-align: middle;
<div class="vcenter">
<p>This is my Text</p>
</div>弹性：
.vcenter
display: flex; /* <-- Here */
align-items: center; /* <-- Here */
justify-content: center; /* optional */
height: 150px; /* <-- Here */
background: #eee; /* optional */
width: 150px;
<div class="vcenter">
<p>This is my text</p>
</div>这是（实际上是）我最喜欢解决这个问题的解决方案（简单且很好的浏览器支持）：
div
margin: 5px;
text-align: center;
display: inline-block;
.vcenter
background: #eee; /* optional */
width: 150px;
height: 150px;
.vcenter:before
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
.vcenter > :first-child
display: inline-block;
vertical-align: middle;
max-width: 99.999%;
<div class="vcenter">
<p>This is my text</p>
</div>
<div class="vcenter">
<h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
<div>
<p>This is my</p>
<p>Text</p>
</div>
</div>【讨论】：
【参考方案14】：有several tricks 用于在div 的中心显示内容或图像。有些答案真的很好，我也完全同意这些。
CSS 中的绝对水平和垂直居中
http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/
有多个10 techniques with examples。现在就看你喜欢哪个了。
毫无疑问，display:table; display:table-Cell 是一个更好的把戏。
以下是一些不错的技巧：
技巧 1 - 使用display:table; display:table-cell
HTML
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
CONTENT
</div>
</div>
</div>
CSS 代码
.Center-Container.is-Table display: table;
.is-Table .Table-Cell
display: table-cell;
vertical-align: middle;
.is-Table .Center-Block
width: 50%;
margin: 0 auto;
技巧 2 - 使用display:inline-block
HTML
<div class="Center-Container is-Inline">
<div class="Center-Block">
CONTENT
</div>
</div>
CSS 代码
.Center-Container.is-Inline
text-align: center;
overflow: auto;
.Center-Container.is-Inline:after,
.is-Inline .Center-Block
display: inline-block;
vertical-align: middle;
.Center-Container.is-Inline:after
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
.is-Inline .Center-Block
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
技巧 3 - 使用position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
<div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
<h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
<p>This box is absolutely centered, horizontally and vertically, within its container</p>
</div>
</div>
【讨论】：
【参考方案15】：这是最适合单行文本的解决方案。
如果行数已知，它也可以用于多行文本，并进行一些调整。
.testimonialText
font-size: 1em; /* Set a font size */
.testimonialText:before /* Add a pseudo element */
content: "";
display: block;
height: 50%;
margin-top: -0.5em; /* Half of the font size */
Here is a JSFiddle.
【讨论】：
【参考方案16】：CSS：
.vertical
display: table-caption;
将此类添加到包含要垂直对齐的内容的元素中
【讨论】：
【参考方案17】：这是我找到的最干净的解决方案（Internet Explorer 9+），并通过使用 transform-style 为“偏移 0.5 像素”问题添加了修复程序，而其他答案已被省略。
.parent-element
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
.element
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
来源：Vertical align anything with just 3 lines of CSS
【讨论】：
【参考方案18】：display: flex 很容易。使用以下方法，div 中的文本将垂直居中：
div
display: -webkit-flex;
display: flex;
align-items: center;
/* More style: */
height: 300px;
background-color: #888;
<div>
Your text here.
</div>如果你愿意，水平：
div
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* More style: */
height: 300px;
background-color: #888;
<div>
Your text here.
</div>你必须看到你需要的浏览器版本；在旧版本中，代码不起作用。
【讨论】：
【参考方案19】：使用 flex，注意浏览器渲染的差异。
这适用于 Chrome 和 Internet Explorer：
.outer
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
.inner
display: flex;
width: 50%;
height: 50%;
margin: auto;
text-align: center;
justify-content: center;
align-items: center;
background-color: #fcc;
<div class="outer"><div class="inner">Active Tasks</div></div>与仅适用于 Chrome 的这个比较：
.outer
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
.inner
display: flex;
width: 50%;
height: 50%;
margin: auto;
background-color: #fcc;
<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>【讨论】：
【参考方案20】：一个不知道值的元素的简单解决方案：
HTML
<div class="main">
<div class="center">
whatever
</div>
</div>
CSS
.main
position: relative
.center
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
【讨论】：
【参考方案21】：您可以使用 Flexbox 在 div 内垂直对齐中心文本。
<div>
<p class="testimonialText">This is the testimonial text.</p>
</div>
div
display: flex;
align-items: center;
您可以通过 A Complete Guide to Flexbox 了解更多信息。
【讨论】：
【参考方案22】：<!DOCTYPE html>
<html>
<head>
<style>
.container
height: 250px;
background: #f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
justify-content: center;
p
font-size: 24px;
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
【讨论】：
【参考方案23】：根据 Adam Tomat 的回答，准备了一个 JSFiddle example 来对齐 div 中的文本：
<div class="cells-block">
text<br/>in the block
</div>
通过在 CSS 中使用 display:flex：
.cells-block
display: flex;
flex-flow: column;
align-items: center; /* Vertically */
justify-content: flex-end; /* Horisontally */
text-align: right; /* Addition: for text's lines */
另一个example 和a blog post 中的一些解释。
【讨论】：
【参考方案24】：这很好用：
HTML
<div class="information">
<span>Some text</span>
<mat-icon>info_outline</mat-icon>
</div>
萨斯
.information
display: inline-block;
padding: 4px 0;
span
display: inline-block;
vertical-align: middle;
mat-icon
vertical-align: middle;
不带和带图像标签<mat-icon>（这是一种字体）。
【讨论】：
【参考方案25】：试试这个，在父 div 上添加：
display: flex;
align-items: center;
【讨论】：
【参考方案26】：用途：
h1
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.container
height: 200px;
width: 500px;
position: relative;
border: 1px solid #eee;
<div class="container">
<h1>Vertical align text</h1>
</div>有了这个技巧，你可以对齐任何东西，如果你不想让它居中添加“left:0”来左对齐。
【讨论】：
【参考方案27】：使用 CSS 网格为我做到了：
.outer
background-color: grey;
width: 10rem;
height: 10rem;
display: grid;
justify-items: center;
.inner
background-color: #FF8585;
align-self: center;
<div class='outer'>
<div class='inner'>
Content
</div>
</div>【讨论】：
【参考方案28】：网格项目的边距自动。
与 Flexbox 类似，在网格项上应用自动边距使其在两个轴上居中：
.container
display: grid;
.element
margin: auto;
【讨论】：
【参考方案29】：您可以使用 css flexbox。
.testimonialText
height: 500px;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #b4d2d2;
<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>【讨论】：
请注明您需要指定height；否则将无法正常工作。【参考方案30】：
Flexbox 非常适合我，将父 div 中的多个元素水平和垂直居中。
HTML 代码：
<div class="parent-div">
<div class="child-div">
<a class="footer-link" href="https://www.github.com/">GitHub</a>
<a class="footer-link" href="https://www.facebook.com/">Facebook</a>
<p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
</div>
</div>
CSS 代码： 下面的代码将 parent-div 内的所有元素堆叠在一列中，将元素水平和垂直居中。 我使用 child-div 将两个 Anchor 元素保持在同一行（行）上。如果没有 child-div，所有三个元素（Anchor、Anchor 和 Paragraph）都堆叠在 parent-div 的列中。这里只有 child-div 堆叠在 parent-div 列内。
/* */
.parent-div
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
【讨论】：
以上是关于如何垂直对齐div中的文本？的主要内容，如果未能解决你的问题，请参考以下文章
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]