如何在 div 块内居中文本（水平和垂直）？
Posted
技术标签:
【中文标题】如何在 div 块内居中文本（水平和垂直）？【英文标题】：How can I center text (horizontally and vertically) inside a div block? 【发布时间】：2011-08-07 21:28:43 【问题描述】：我有一个div 设置为display:block（90px height 和width），里面有一些文字。
我需要文本在垂直和水平方向居中对齐。
我试过text-align:center，但是它没有做垂直居中的部分，所以我尝试了vertical-align:middle，但是没有用。
有什么想法吗？
【问题讨论】：
我终于找到了一个适用于相对大小且没有固定高度的解决方案：***.com/a/16195362/1301331 知道如何居中/居中元素非常重要。下面的文件给出了一个非常清晰的画面。 w3.org/Style/Examples/007/center.en.html 这里有两种简单的方法可以在 div 中垂直、水平或同时居中对象（纯 CSS）：***.com/a/31977476/3597276 【参考方案1】：如果是一行文本和/或图像，那么很容易做到。只需使用：
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
就是这样。如果它可以是多行，那么它会更复杂一些。但是http://pmob.co.uk/ 上有解决方案。寻找“垂直对齐”。
由于它们往往是 hack 或添加复杂的 div...我通常使用带有单个单元格的表格来执行此操作...以使其尽可能简单。
2020 年更新：
除非您需要使其在 Internet Explorer 10 等早期浏览器上运行，否则您可以使用 flexbox。它是widely supported by all current major browsers。基本上，需要将容器指定为 flex 容器，并沿其主轴和交叉轴居中：
#container
display: flex;
justify-content: center;
align-items: center;
为孩子指定一个固定的宽度，称为“弹性项目”：
#content
flex: 0 0 120px;
例如：http://jsfiddle.net/2woqsef1/1/
要收缩包装内容，更简单：只需从弹性项目中删除flex: ... 行，它就会自动收缩包装。
示例：http://jsfiddle.net/2woqsef1/2/
以上示例已经在包括 MS Edge 和 Internet Explorer 11 在内的主流浏览器上进行了测试。
如果您需要对其进行自定义，请提供一个技术说明：在 flex 项内部，由于该 flex 项本身不是 flex 容器，旧的非 flexbox 方式的 CSS 可以按预期工作。然而，如果你在当前的 flex 容器中添加一个额外的 flex 项，这两个 flex 项将被水平放置。要使它们垂直放置，请将 flex-direction: column; 添加到 flex 容器中。这就是它在 flex 容器和它的 立即 子元素之间的工作方式。
还有另一种进行居中的方法：不为 flex 容器的主轴和交叉轴上的分布指定 center，而是在 flex 项目上指定 margin: auto 以占用所有额外空间所有四个方向，均匀分布的边距将使弹性项目在所有方向上居中。这有效，除非有多个弹性项目。此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11。
2016/2017 年更新：
更常见的是transform，即使在旧版浏览器（例如 Internet Explorer 10 和 Internet Explorer 11）中也能正常工作。它可以支持多行文本：
position: relative;
top: 50%;
transform: translateY(-50%);
示例：https://jsfiddle.net/wb8u02kL/1/
收缩包装宽度：
上述解决方案为内容区域使用了固定宽度。要使用收缩包装的宽度，请使用
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
示例：https://jsfiddle.net/wb8u02kL/2/
如果需要对 Internet Explorer 10 的支持，则 flexbox 将不起作用，而上述方法和 line-height 方法将起作用。否则，flexbox 会完成这项工作。
【讨论】：
现在有一个display: table-cell 属性，仅供参考。使用它使元素表现得像一个表格单元格并允许vertical-align: middle;
如果您将font: 与这些一起使用，请确保将其放在line-height 之前。
当 div 包含 元素时，这可能无法按预期工作。
如果我的身高是 % 怎么办？
使用这种方法，文本文本必须在一行中，否则您将在第一行下方有第二行 90px。【参考方案2】：
截至 2014 年的常用技术：
方法一——transformtranslateX/translateY:
Example Here/Full Screen Example
在supported browsers（大部分）中，您可以结合使用top: 50%/left: 50% 和translateX(-50%) translateY(-50%) 来动态地垂直/水平居中元素。
.container
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
方法 2 - Flexbox 方法：
Example Here/Full Screen Example
在supported browsers 中，将目标元素的display 设置为flex，并使用align-items: center 进行垂直居中，使用justify-content: center 进行水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持 (see example)。
html, body, .container
height: 100%;
.container
display: flex;
align-items: center;
justify-content: center;
方法 3 - table-cell/vertical-align: middle:
Example Here/Full Screen Example
在某些情况下，您需要确保将html/body 元素的高度设置为100%。
对于垂直对齐，将父元素的width/height 设置为100% 并添加display: table。然后对于子元素，将display 更改为table-cell 并添加vertical-align: middle。
对于水平居中，您可以添加 text-align: center 以使文本和任何其他 inline 子元素居中。或者，您可以使用 margin: 0 auto 假设元素是 block 级别。
html, body
height: 100%;
.parent
width: 100%;
height: 100%;
display: table;
text-align: center;
.parent > .child
display: table-cell;
vertical-align: middle;
方法 4 - 从顶部绝对定位 50% 并有位移：
Example Here/Full Screen Example
此方法假定文本具有已知高度 - 在本例中为 18px。只是相对于父元素从顶部绝对定位元素50%。使用负的margin-top 值，即元素已知高度的一半，在本例中为-9px。
html, body, .container
height: 100%;
.container
position: relative;
text-align: center;
.container > p
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
方法 5 - line-height 方法（最不灵活 - 不建议）：
Example Here
在某些情况下，父元素会有一个固定的高度。对于垂直居中，您所要做的就是在子元素上设置一个等于父元素固定高度的line-height 值。
虽然此解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时它不起作用 - like this。
.parent
height: 200px;
width: 400px;
text-align: center;
.parent > .child
line-height: 200px;
方法 4 和 5 并不是最可靠的。选择前 3 个中的一个。
【讨论】：
2.如果 .containers 父级是绝对的，则 Flexbox 方法是唯一有效的方法。 1. 由于绝对 .container 和 3. 方法使父级缩小，而 .parent 具有绝对位置。【参考方案3】：使用 flexbox/CSS：
<div class="box">
<p>അ</p>
</div>
CSS：
.box
display: flex;
justify-content: center;
align-items: center;
取自Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally
【讨论】：
小心：在 IE 中不起作用。您需要添加display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center。
为inline- 元素添加text-align:center .. 例如文本。
请注意，flexbox 现在在 IE 10 和 11 中至少有部分支持，并且根据caniuse 可以为 97% 的用户工作。我不认为浏览器支持是反对它的论据了。【参考方案4】：
将 display: table-cell; 行添加到该 div 的 CSS 内容中。
只有表格单元格支持vertical-align: middle;，但您可以将 [table-cell] 定义赋予 div...
这里有一个活生生的例子：http://jsfiddle.net/tH2cc/
div
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; // This says treat this element like a table cell
vertical-align:middle; // Now we can center vertically like in a TD
【讨论】：
如果position 是绝对的或固定的，这将不起作用。见：jsfiddle.net/tH2cc/1636【参考方案5】：
将此 CSS 类赋予目标
：.centered
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: red; /* Not necessary just to see the result clearly */
<div class="centered">This text is centered horizontally and vertically</div>【讨论】：
【参考方案6】：我总是对容器使用以下 CSS，使其内容水平和垂直居中。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
在此处查看实际操作：https://jsfiddle.net/yp1gusn7/
【讨论】：
【参考方案7】：您可以为此尝试非常简单的代码：
display: flex;
align-items: center;
justify-content: center;
.box
height: 90px;
width: 90px;
background: green;
display: flex;
align-items: center;
justify-content: center;
<div class="box">
Lorem
</div>Codepen 链接：http://codepen.io/santoshkhalse/pen/xRmZwr
【讨论】：
【参考方案8】：您可以在父项 div 中使用flex 属性并将margin:auto 属性添加到子项：
.parent
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
/* Change the `p` tag to what your items child items are */
.parent p
margin: auto;
您可以在此处查看flex 的更多选项：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
【讨论】：
【参考方案9】：方法 1
div
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
<div>
Hello, World!!
</div>方法2
div
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
span
display: inline-block;
vertical-align: middle;
line-height: normal;
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>方法 3
div
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
span
display: table-cell;
vertical-align: middle;
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>【讨论】：
【参考方案10】：2020 年之道
.parent
display: grid;
place-items: center;
【讨论】：
【参考方案11】：# Parent
display:table;
# Child
display: table-cell;
width: 100%; // As large as its parent to center the text horizontally
text-align: center;
vertical-align: middle; // Vertically align this element on its parent
【讨论】：
这与发布的其他答案有何不同？【参考方案12】：div
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
<div>
Hello, World!!
</div>【讨论】：
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。【参考方案13】：<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
.small-container span
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
</style>
【讨论】：
【参考方案14】：GRID
.center
display: grid;
justify-items: center;
align-items: center;
.center
display: grid;
justify-items: center;
align-items: center;
.box
width: 200px;
height: 100px;
background: red;
<div class="box center">My text</div>【讨论】：
【参考方案15】：在父div中添加如下代码
display: grid;
place-items: center;
【讨论】：
【参考方案16】：调整行高以获得垂直对齐。
line-height: 90px;
【讨论】：
不会投反对票，因为它可以是一个解决方案，但是只有在你能保证单行文本的情况下这才有效......【参考方案17】：.cell-row display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center
.cell display: table-cell
.cell-middle vertical-align: middle<div class="cell-row">
<div class="cell cell-middle">Center</div>
</div>【讨论】：
【参考方案18】：您可以尝试以下方法：
如果你只有一个单词或一行句子，那么下面的代码就可以解决问题。
在 div 标签内有一个文本并给它一个 id。为该 id 定义以下属性。
id-name
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed red;
注意：确保 line-height 属性与分割的高度相同。
Image
但是，如果内容超过一个单词或一行，那么这不起作用。此外，有时您无法以 px 或 % 为单位指定分区的大小（当分区非常小并且您希望内容正好在中间时）。
为了解决这个问题，我们可以尝试以下属性组合。
id-name
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
Image
这 3 行代码将内容准确地设置在一个分区的中间（与显示的大小无关）。 "align-items: center" 有助于垂直居中，而 "justify-content: center" 将使其水平居中。
注意： Flex 并不适用于所有浏览器。确保添加适当的供应商前缀以获得额外的浏览器支持。
【讨论】：
【参考方案19】：这对我有用（测试OK！）：
HTML：
<div class="mydiv">
<p>Item to be centered!</p>
</div>
CSS：
.mydiv
height: 100%; /* Or other */
position: relative;
.mydiv p
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* To compensate own width and height */
您可以选择 50% 以外的其他值。例如，25% 以父母的 25% 为中心。
【讨论】：
【参考方案20】：<!DOCTYPE html>
<html>
<head>
<style>
.maindiv
height: 450px;
background: #f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
p
font-size: 24px;
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
【讨论】：
【参考方案21】：对我来说这是最好的解决方案：
HTML：
<div id="outer">
<img src="logo.png">
</div>
CSS：
#outer
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
【讨论】：
【参考方案22】：应用样式：
position: absolute;
top: 50%;
left: 0;
right: 0;
无论长度如何，您的文本都会居中。
【讨论】：
【参考方案23】：这对我有用：
.center-stuff
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
【讨论】：
【参考方案24】：这应该是正确的答案。最干净和最简单的：
.element
position: relative;
top: 50%;
transform: translateY(-50%);
【讨论】：
不包含transform: translateY(-50%);会怎样【参考方案25】：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
【讨论】：
这是很好的干净代码。不过，您可以将 ID 添加到您的 div 标签，以便您以后可以在必要时使用它们。 你读过之前的答案吗？你能说出这个答案对之前的答案有什么补充吗？ @AmirMdAmiruzzaman 你能告诉我们这段代码的 cleanest 部分是什么吗 :) ...我看到内联样式不好...也添加 ID 不是也是个好主意，我们需要类 重复乔希回答的方法1【参考方案26】：真正适合我的简单代码！只需一行，您的文本就会水平居中。
.center-horizontally
justify-content: center;
<Card.Footer className="card-body-padding center-horizontally">
<label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>
输出如下所示：
【讨论】：
【参考方案27】：试试下面的例子。我为每个类别添加了示例：水平和垂直
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
text-align: center;
#vertical
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
【讨论】：
问题是关于水平和垂直居中，这个解决方案之前已经提供了以上是关于如何在 div 块内居中文本（水平和垂直）？的主要内容，如果未能解决你的问题，请参考以下文章