如何使用CSS将文本垂直居中？[重复]

Absolute Positioning and Stretching

As with the method above this one begins by setting positioning on the parent and child elements as relative and absolute respectively. From there things differ.

In the code below I’ve once again used this method to center the child both horizontally and vertically, though you can use the method for vertical centering only.

HTML

<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，尝试使子元素延伸到所有四个边缘。由于我们的子元素小于父元素，因此无法到达所有子元素四个边缘。

但是，将auto设置为所有四个边的边距会使相反的边距相等，并在父div的中心显示子div。

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

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

在您的元素的CSS属性中添加此小代码。太棒了。尝试一下！

这很简单而且很简短：

.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中使用定位方法：

在这里检查结果。

HTML：

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

希望您也使用此方法。

将其设置在其中，button而div不用担心它的视觉3D效果不佳。

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

我需要一排可点击的大象，它们垂直居中，但没有使用桌子绕过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的答案，以消除对行高和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需要fixed-height包含在内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>

更好的主意。你也可以这样

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>

简单而通用的方法是（如Michielvoo的表格方法）：

[ctrv]{
    display:table !important;
}

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

在父标记上使用此属性（或等效类）即使对于许多子项也可以对齐：

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

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

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

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

声明此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();
}

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

当具有％的非固定相对高度时，可以使用它。#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应将替换为#box span。

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

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

例：

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

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

的HTML

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

的CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

结果

您还可以使用以下属性。

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

另一种方式：

不要设置的height属性div，而是使用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
}

这将设置在顶部和底部padding的的div来60px，和左，右padding为零，使得div120个像素（加上你的字体的高度）高，且将在div垂直居中的文本。

被接受为答案的解决方案是line-height与div的高度相同的完美选择，但是当文本换行或两行时，此解决方案无法完美使用。

如果文本已换行或在div中位于多行上，请尝试执行此操作。

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

有关更多参考，请参见：

• 垂直居中多行文字

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

另一种方法（此处未提及）是Flexbox。

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

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>

或者，当flex容器中只有一个flex-item时，flexbox可以通过自动边距将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>

注意：以上所有内容均适用于居中项目，同时将它们水平排列。这也是默认行为，因为默认情况下该值flex-directionIS row。然而如果柔性物品需要在要布置的垂直列，那么flex-direction: column应该在容器上被设置为设置主轴作为柱和另外的justify-content和align-items属性现在工作的其他方式与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，就看到它的一些特性，并得到语法最大的浏览器支持flexyboxes

另外，如今的浏览器支持非常好：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;

试试这个解决方案：

.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 +构建。

灵活的方法

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代码轻松完成此操作：

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>

您可以尝试以下基本方法：

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

模拟表显示

这是另一个选项，可能在不支持display: table和的display: table-cell较旧的浏览器（主要是Internet Explorer 7）上不起作用。使用CSS我们模拟表的行为（因为表支持垂直对齐），并且HTML与第二个示例相同：

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>

使用绝对定位

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

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

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

All credit goes to this link owner @Sebastian Ekström Link; please go through this. See it in action codepen. By reading the above article I also created a demo fiddle.

With just three lines of CSS (excluding vendor prefixes) we can do it with the help of a transform: translateY vertically centers whatever we want, even if we don’t know its height.

The CSS property transform is usually used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text, etc.

So, to do this we write:

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

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

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