如何使用CSS垂直居中文本？

小开

最佳答案

你可以试试这个基本方法：

div {height: 100px;line-height: 100px;text-align: center;border: 2px dashed #f69c55;}

<div>Hello World!</div>

不过，它只适用于单行文本，因为我们将该行的高度设置为与包含框元素相同的高度。

更通用的方法

这是另一种垂直对齐文本的方式，单行和多行文本都可以，但是仍然需要固定高度的容器：

div {height: 100px;line-height: 100px;text-align: center;border: 2px dashed #f69c55;}span {display: inline-block;vertical-align: middle;line-height: normal;}

<div><span>Hello World!</span></div>

CSS只是调整<div>的大小，通过设置<div>的line-高度等于它的高度来垂直居中对齐<span>，并使<span>成为vertical-align: middle的inline-block。然后它将<span>的line-高度设置回正常，因此其内容将在块内自然流动。

模拟表格展示

这是另一个选项，它可能不适用于旧的不支持#0和#1的浏览器（基本上只是Internet Explorer 7）。使用CSS我们模拟表格行为（因为表格支持垂直对齐），超文本标记语言与第二个示例相同：

div {display: table;height: 100px;width: 100%;text-align: center;border: 2px dashed #f69c55;}span {display: table-cell;vertical-align: middle;}

<div><span>Hello World!</span></div>

使用绝对定位

此技术使用绝对定位的元素将顶部、底部、左侧和右侧设置为0。

div {display: flex;justify-content: center;align-items: center;height: 100px;width: 100%;border: 2px dashed #f69c55;}

<div><span>Hello World!</span></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>

小开

对于单行文本（或单个字符），您可以使用此技术：

当#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（更容易更改结果框的高度）。

如果您想将内部文本放在超文本标记语言中，而不是CSS中，那么您需要将文本内容包装在额外的内联元素中并编辑#box::after以匹配它。（当然，应该删除content:属性。）

例如，<div id="box"><span>TextContent</span></div>在这种情况下，#box::after应该替换为#box span。

对于Internet Explorer 8支持，您必须将::替换为:。

小开

另一种方法（这里还没有提到）是Flexbox。

只需将以下代码添加到容器元素：

display: flex;justify-content: center; /* align horizontal */align-items: center; /* align vertical */

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

或者，不是通过容器对齐内容，flexbox也可以将flex项目与自动边距当flex容器中只有一个flex项时居中（如上面问题中给出的示例）。

因此，要在水平和垂直方向上将flex项居中，只需将其设置为margin:auto

Flexbox演示2

.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;}.box span {margin: auto;}

<div class="box"><span>margin:auto on a flex item centers it both horizontally and vertically</span></div>

NB：上述所有内容都适用于在水平行中布局项目时对其进行居中。这也是默认行为，因为默认情况下flex-direction的值为row。然而，如果需要在垂直柱中布局flex-项目，则应在容器上设置flex-direction: column以将主轴设置为列，此外justify-content和align-items属性现在工作row0，justify-content: center垂直居中，align-items: center水平居中）

`flex-direction: column`演示

.box {height: 150px;width: 400px;background: #000;font-size: 18px;font-style: oblique;color: #FFF;display: flex;flex-direction: column;justify-content: center;/* vertically aligns items */align-items: center;/* horizontally aligns items */}p {margin: 5px;}

<div class="box"><p>When flex-direction is column...</p><p>"justify-content: center" - vertically aligns</p><p>"align-items: center" - horizontally aligns</p></div>

从Flexbox开始查看它的一些功能并获得最大浏览器支持的语法的好地方是flexybox

此外，现在的浏览器支持非常好：caniuse

对于display: flex和align-items的跨浏览器兼容性，您可以使用以下命令：

display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;

小开

简单而通用的方法是（asMichielvoo's表方法：

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

在父标记上使用此属性（或等效类）甚至可以让许多子标记对齐：

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

小开

所有功劳归于此链接所有者@Sebastian EkströmLink；请浏览此链接。在行动coDepen中看到它。通过阅读上面的文章，我还创建了小提琴演示。

只需三行CSS（不包括供应商前缀），我们就可以在转换的帮助下完成：translateY垂直居中我们想要的任何东西，即使我们不知道它的高度。

CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常这必须通过绝对定位或设置行高来完成，但这些需要您知道元素的高度或仅适用于单行文本等。

为此，我们写：

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

这就是你所需要的。它与绝对位置方法类似，但好处是我们不必在父元素的元素或位置属性上设置任何高度。它直接开箱即用，即使在Internet Explorer 9中也是如此！

为了使其更简单，我们可以将其编写为带有供应商前缀的混合。

小开

灵活的方法

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>

小开

更好、更简单、响应式的方法是将CSS中的margin-top设置为45%左右：

margin-top: 45%;

您可能需要使用该数字，但它将位于周围div的中心。

小开

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。类似于line-高度，只有当你有一行文本时才有效。虽然这样，如果你有更多的内容，文本仍然会居中，但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 120像素（加上字体的高度）高，并将文本垂直居中放置在div中。

小开

供参考并添加一个更简单的答案：

纯CSS：

.vertical-align {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}

或者作为SASS/SCSS混合：

@mixin vertical-align {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}

使用：

.class-to-center {@include vertical-align;}

Sebastian Ekström的博客文章垂直对齐任何东西只需3行CSS：

此方法可能会导致元素由于放置在“半像素”上而变得模糊。解决方案是将其父元素设置为保留-3d。如下所示：

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

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

这将是从现在开始制作网站的方式。

学吧！

小开

我需要一排可点击的大象，垂直居中，但不使用表格来绕过Internet Explorer 9的一些怪异之处。

我最终找到了最好的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>

显然，你不需要边界，但它们可以帮助你看到它是如何工作的。

小开

我只想扩展Michielvoo的回答以释放对line-高度和div高度呼吸的需求。它基本上只是一个简化版本，如下所示：

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>

注意：css的一部分被注释掉了，这对于div的fixed-height是必需的。

小开

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

在元素的CSS属性中添加这个小代码。太棒了。试试看！

小开

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

如果文本被包装或在div内的多行上，请尝试此操作。

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

有关更多参考，请参阅：

垂直居中多行文本

6种使用CSS垂直居中的方法

小开

较新的浏览器现在支持CSScalc功能。如果您针对这些浏览器，您可能需要考虑执行以下操作：

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

关键是在绝对或相对定位的父div中使用style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;"。

小开

满足您所有的垂直对齐需求！

宣布这个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();}

小开

尝试这个解决方案：

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

使用css+构建。

小开

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

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

小开

垂直对齐中心的一个非常简单且最强大的解决方案：

.outer-div {height: 200px;width: 200px;text-align: center;border: 1px solid #000;}
.inner {position: relative;top: 50%;transform: translateY(-50%);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>

小开

这个完美工作。

您必须为div使用表格样式，为内容使用中心对齐。

小开

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

当然，这将适用于您需要的任何维度（除了100%的父级）。如果您取消注释边界线，将有助于熟悉自己。

jsfiddle演示供你摆弄。

caniuse支持:85.22%+6.26%=91.48%（甚至Internet Explorer也在！）

小开

.text{background: #ccc;position: relative;float: left;text-align: center;width: 400px;line-height: 80px;font-size: 24px;color: #000;float: left;}

小开

尝试转换属性：

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

小开

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

小开

CSS3 flexbox有一个小小的魔法：

/* Important */section {display: flex;display: -webkit-flex;}section p {/* Key Part */margin: auto;}

/* Unimportant, coloring and UI */section {height: 200px;width: 60%;margin: auto;border-radius: 20px;border: 3px solid orange;background-color: gold;}section p {text-align: center;font-family: Cantarell, Calibri;font-size: 15px;background-color: yellow;border-radius: 20px;padding: 15px;}

<section><p>I'm a centered box!<br/>Flexboxes are great!</p></section>

提示：如果要将文本居中，请将上面标记为“Key Part”的行替换为以下行之一：

垂直方向：
```
margin: auto 0;
```
水平方向：
```
margin: 0 auto;
```

正如我所注意到的，这个技巧也适用于网格（即display: grid）。

小开

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

小开

您可以使用以下代码片段作为参考。它对我来说很有魅力：

html,body {height: 100%;margin: 0;padding: 0;width: 100%;}
body {display: table;}
.centered-text {text-align: center;display: table-cell;vertical-align: middle;}

<div class="centered-text"><h1>Yes, it's my landing page</h1><h2>Under construction, coming soon!!!</h2></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>

小开

尝试以下代码：

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

div {height: 80%;width: 100%;text-align: center;display: table-cell;vertical-align: middle;background: #4CAF50;color: #fff;font-size: 50px;font-style: italic;}

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

小开

下面的代码将把div放在屏幕中间，而不管屏幕大小或div大小：

.center-screen {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;min-height: 100vh;}

 <html><head></head><body><div class="center-screen">I'm in the center</div></body></html>

查看更多关于flex这里的信息。

小开

我看到了前面的答案，它们仅适用于该屏幕宽度（不响应）。对于响应式，您必须使用flex。

示例：

div { display:flex; align-items:center; }

小开

这个主意更好，你也可以这样做

body,html {height: 100%;}
.parent {white-space: nowrap;height: 100%;text-align: center;}
.parent:after {display: inline-block;vertical-align: middle;height: 100%;content: '';}
.centered {display: inline-block;vertical-align: middle;white-space: normal;}

<div class="parent"><div class="centered"><p>Lorem ipsum dolor sit amet.</p></div></div>

小开

绝对定位和拉伸

与上面的方法一样，这个方法首先将父元素和子元素的定位分别设置为相对和绝对。从那里开始，事情有所不同。

在下面的代码中，我再次使用此方法在水平和垂直方向上居中子节点，尽管您只能使用该方法进行垂直居中。

超文本标记语言

<div id="parent"><div id="child">Content here</div></div>

css

#parent {position: relative;}#child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 30%;margin: auto;}

此方法的想法是通过将顶部、底部、右侧和左侧值设置为0来尝试让子元素拉伸到所有四条边。因为我们的子元素比我们的父元素小，所以它不能到达所有四条边。

但是，将自动设置为所有四边的边距会导致相反的边距相等，并在父div的中心显示我们的子div。

不幸的是，上面的方法在Internet Explorer 7及以下版本中不起作用，并且像前面的方法一样，子div中的内容可能会变得太大，导致它被隐藏。

小开

这很简单，也很简短：

.block {display: table-row;vertical-align: middle;}
.tile {display: table-cell;vertical-align: middle;text-align: center;width: 500px;height: 100px;}

<div class="body"><span class="tile">Hello middle world! :)</span></div>

小开

您可以在CSS中使用定位方法：

在这里查看结果……

超文本标记语言：

<div class="relativediv"><p>Make me vertical align as center</p></div>

css：

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

希望你也用这个方法。

小开

这是使用flexbox的另一个选项。

#container {display: flex;height: 200px;background: orange;}
.child {margin: auto;}

<div id="container"><div class="child"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, nemo.</span></div></div>

结果