如何在div中垂直对齐文本？

我试图找到最有效的方法来对齐文本与一个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 dolorin 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>

2200535 次浏览
小开
最佳答案

在现代浏览器中做到这一点的正确方法是使用Flexbox。

详情见这个答案。

有关在旧浏览器中工作的一些旧方法，请参阅下文。

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）的黑客合并为样式，使用#隐藏新浏览器的样式：

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>

小开

您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.center {height: 309px;line-height: 309px; /* same as height! */}
<div class="center">A single line.</div>

事实上，你可以完全删除height属性。

这只适用于一行文本，所以要小心。

小开

您可以通过将显示设置为“table-cell”并应用vertical-align: middle;来做到这一点：

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

然而，根据我未经许可从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录，所有版本的Internet Explorer都不支持这一点。

备注： Internet Explorer 7及更早版本不支持值“inline-table”、“table”、“table-的标题”、“table-cell”、“table-的列”、“table-row”、“table-row-group”和“继承”。Internet Explorer 8需要！DOCTYPE。Internet Explorer 9支持这些值。

下表显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值。

在此处输入图像描述

小开

这里有个很棒的资源

从http://howtocenterincss.com/：

在CSS中居中是一件痛苦的事情。根据各种因素，似乎有无数种方法可以做到这一点。这将它们合并并为您提供每种情况所需的代码。

使用flexbox

为了使这篇文章与最新技术保持一致，这里有一种更简单的方法来使用Flexbox居中。Internet Explorer 9及更低版本不支持Flexbox。

以下是一些很棒的资源：

带有浏览器前缀的JSFiddle

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>

另一种解决方案

这是从zero六3，让你中心的任何六行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>

以前的答复

一个简单的和跨浏览器的方法，有用的链接在标记的答案有点过时。

如何在无序列表和div中垂直和水平居中文本，而无需诉诸JavaScript或CSS行高度。无论您有多少文本，您都不必将任何特殊类应用于特定列表或div（每个代码都相同）。这适用于所有主要浏览器，包括Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera和Safari。有两个特殊的样式表（一个用于Internet Explorer 7，另一个用于Internet Explorer 6）来帮助它们，因为它们的CSS限制是现代浏览器没有的。

安迪·霍华德-如何在无序列表或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>

小开

如果您需要使用min-height属性，则必须在以下位置添加此CSS：

.outerContainer .innerContainer {height: 0;min-height: 100px;}
小开

尝试嵌入一个表格元素。

<div><table style='width:200px; height:100px;'><td style='vertical-align:middle;'>copenhagen</td></table></div>

小开

我使用以下方法轻松地将随机元素垂直居中：

超文本标记语言：

<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-）才能使此功能适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

小开

嗯，显然有很多方法可以解决这个问题。

但是我有一个<div>是绝对定位的，height:100%（实际上，top:0;bottom:0和固定宽度）和display:table-cell只是不能垂直居中文本。我的解决方案确实需要一个内跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是.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/

小开

有一种更简单的方法可以在不使用table/table-cell的情况下垂直对齐内容：

http://jsfiddle.net/bBW5w/1/

在其中，我添加了一个不可见的（宽度=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%;}
小开

检查这个简单的解决方案：

超文本标记语言

<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

小开

这是在CSS中使用calc()的div模式中div的另一个变体。

<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 class="relative"><!--used as a container--><!-- add content here to to make some height and widthexample:<img src="" alt=""> --><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;}
小开

这些天（我们不再需要Internet Explorer 6-8了）我只会使用CSSdisplay: 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>

Flex：

.vcenter {display: flex;align-items: center;height: 150px;justify-content: center; /* optional */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>

小开

有几个技巧在div的中心显示内容或图像。有些答案非常好，我也完全同意这些答案。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

有10个技术示例以上。现在由你决定你喜欢哪一个。

毫无疑问，display:table; display:table-Cell是个更好的把戏。

一些好的技巧如下：

技巧1-使用display:table; display:table-cell

超文本标记语言

<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

超文本标记语言

<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&nbsp;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>
小开

这是一个最适合单行文本的解决方案。

如果行数已知，它也可以用于多行文本，并进行一些调整。

.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 */}

这是一个JSFiddle

小开

css：

.vertical {display: table-caption;}

将此类添加到包含要垂直对齐的元素中

小开

这是我找到的最干净的解决方案（Internet Explorer 9+），并通过使用其他答案省略的transform-style为“关闭.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%);}

来源：垂直对齐任何东西只有3行CSS

小开

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

您必须看到所需的浏览器版本；在旧版本中，代码不起作用。

小开

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

Compare with this one that works only with 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>

小开

一个不知道值的元素的简单解决方案：

超文本标记语言

<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%);}
小开

您可以使用Flexbox在div内垂直对齐中心文本。

<div><p class="testimonialText">This is the testimonial text.</p></div>
div {display: flex;align-items: center;}

您可以在Flexbox的完整指南中了解更多信息。

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

根据Adam Tomat的回答，准备了一个JSFiddle<说明>例子来对齐div中的文本：

<div class="cells-block">text<br/>in the block</div>

在CSS中使用显示：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 */}

<说明>例子和一篇博客文章中的一些解释。

小开

这工作得很好：

超文本标记语言

<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>（这是一种字体）。

小开

试试这个，在父div上添加： 

display: flex;align-items: center;
小开

用途：

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>

有了这个技巧，你可以对齐任何东西，如果你不想让它居中添加“左： 0”来对齐左。

小开

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

小开

网格项上的边距自动。

与Flexbox类似，在网格项上应用边距自动将其集中在两个轴上：

.container {display: grid;}.element {margin: auto;}
小开

您可以使用cssflexbox。

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

小开

Flexbox对我来说工作得很好，水平和垂直地居中父div中的多个元素。

下面的代码将父div中的所有元素堆叠在一列中，将元素水平和垂直居中。我使用子div将两个Anchor元素保持在同一行（行）上。没有子div，所有三个元素（Anchor、Anchor和段落）都堆叠在父div的列中。这里只有子div堆叠在父div列中。

.parent-div {height: 150px;display: flex;flex-direction: column;justify-content: center;background: pink;}
<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>

小开

超文本标记语言：

<div class="col-md-2 ml-2 align-middle"><label for="option2" id="time-label">Time</label></div>

css：

.align-middle {margin-top: auto;margin-bottom: auto;}
小开

您可以使用显示网格和位置项目中心：

.container {width: 200px;height: 200px;border: solid red;display: grid;place-items: center;}
<div class="container">Lorem, ipsum dolor.</div>

小开

这将使文本垂直居中：

.parent {display: inline-flex}
.testimonialText {margin-top: auto;margin-bottom: auto;}
<div class="parent"><div class="testimonialText">Hello World</div></div>

小开

非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{height: 300px;display: flex;justify-content: center;align-content: center;flex-direction: column;border: solid 1px #dadada;}
<div class="welcome_box">Hello Friends</div>

输出：

输入图片描述

谢谢你问这个问题，乐于分享。


提交答案