为什么垂直对齐：中间不适用于我的跨度或 div？

这似乎是最好的方法 - 自从我原来的帖子以来已经过去了一段时间，这就是现在应该做的：

.main { 显示：表格； /* 可选的 css 开始 */ height: 90px;宽度：90px； /* 可选的 css 结束 */ } .inner {border: 1px solid #000000;显示：表格单元格；垂直对齐：中间； }

---

使用 CSS3：

<div class="outer">
   <div class="inner"/>
</div>

CSS：

.outer {
  display : flex;
  align-items : center;
}

使用“证明内容：中心；”水平对齐元素

注意：这可能不适用于旧 IE

---

试试这个，非常适合我：

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

---

将 line-height 设置为与包含 div 的高度相同也可以

演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

---

如果您不能依赖 flexbox... 将 .child 放在 .parent 的中心。在像素大小未知（换句话说，总是）并且 IE9+ 也没有问题的情况下工作。

.parent { 位置：相对； } .child { 位置：绝对；最高：50%；左：50%； -ms-transform: 翻译(-50%, -50%);变换：翻译（-50%，-50%）； }

---

您应该将 vertical-align: middle 放在内部元素上，而不是放在外部元素上。设置外部元素的 line-height 属性以匹配外部元素的 height。然后在内部元素上设置 display: inline-block 和 line-height: normal。通过这样做，内部元素上的文本将以正常的行高换行。适用于 Chrome、Firefox、Safari 和 IE 8+

.main { 高度：72px;行高：72px；边框：1px纯黑色； } .inner { 显示：内联块；垂直对齐：中间；行高：正常； }

Fiddle

---

我用它来对齐包装器 div 中心的所有内容，以防它帮助任何人 - 我发现它最简单：

div.wrapper { /* --- 这有效 --- */ display: flex; /* 垂直对齐 */ align-items: center; /* 水平对齐 */ justify-content: center; /* --- ---------- ----- */ 宽度：100%;高度：100px；背景颜色：蓝色； } div.inner { 宽度：50px;高度：50px；背景颜色：橙色； }

---

这是一种现代方法，它利用了 CSS Flexbox 功能。您现在只需将这些样式添加到 .main 容器即可垂直对齐父容器中的内容

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; // To center align it horizontally as well
}

您还可以使用 CSS Grids（基于网格的二维布局系统）。

.main {
  display: grid;
  justify-content: center;
  align-content: center;
}

下面是一种速记方法，但浏览器支持仍然很低 - https://caniuse.com/?search=place-items。

    .main {
      display: grid; // flex  -  works for both
      place-items: center;
    }

你很高兴去！

---

在这里，您有两种方式进行垂直对齐的示例。我使用它们，它们工作得很好。一种是使用绝对定位，另一种是使用 flexbox。

Vertical Align Example

使用 flexbox，您可以使用 align-self 将一个元素自身与另一个元素与 display: flex; 对齐。如果还需要水平对齐，可以在容器中使用 align-items 和 justify-content。

如果不想使用 flexbox，可以使用 position 属性。如果您使容器相对而内容绝对，则内容将能够在容器内自由移动。因此，如果您在内容中使用 top: 0; 和 left: 0;，它将位于容器的左上角。

https://i.stack.imgur.com/y9A5I.png

然后，要对齐它，您只需将顶部和左侧的引用更改为 50%。这会将内容定位在内容左上角的容器中心。

https://i.stack.imgur.com/hjAXM.png

因此，您需要更正此问题，将内容的一半大小向左和顶部平移。

https://i.stack.imgur.com/p63HE.png

---

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

我们将父 div 设置为显示为表格，将子 div 设置为显示为表格单元格。然后我们可以在子 div 上使用 vertical-align 并将其值设置为 middle。此子 div 内的任何内容都将垂直居中。

---

这是一篇关于如何垂直对齐的好文章。我喜欢浮动方式。

http://www.vanseodesign.com/css/vertical-centering/

的HTML：

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

以及对应的样式：

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

---

这很简单。只需在您的主类中添加 display:table-cell。

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

看看这个jsfiddle！

---

这是最新最简单的解决方案 - 无需更改任何内容，只需将三行 CSS 规则添加到您希望居中的 div 容器中。我喜欢 Flex Box #LoveFlexBox

.main { /* 我将高度更改为 200px 以便于查看对齐方式。 */ 高度：200px；垂直对齐：中间；边框：1px 实心#000000；填充：2px； /* 只需将以下三个规则添加到要居中的容器中。 */ 显示：弹性；弹性方向：列；证明内容：中心； /* 这是真正的垂直中心，不需要数学。 */ } .inner { 边框：1px 实心 #000000; } .second { 边框：1px 实心 #000000; }

奖金

justify-content 值可以设置为以下几个选项：

flex-start，它将子 div 对齐到 flex 流在其父容器中开始的位置。在这种情况下，它将保持在顶部。

center，它将子 div 对齐到其父容器的中心。这真的很整洁，因为您不需要添加额外的 div 来包裹所有子项，以将包装器放在父容器中以使子项居中。因此，这是真正的垂直中心（在列 flex-direction 中。类似地，如果将流方向更改为行，它将变为水平居中。

flex-end，它将子 div 对齐到 flex 流在其父容器中结束的位置。在这种情况下，它将移动到底部。

space-between，它将所有孩子从流程的开始传播到流程的结束。如果是演示，我添加了另一个子 div，以显示它们是分散的。

space-around，类似于 space-between，但在流的开始和结束处有一半的空间。

---

设置在 CSS 下面

 /*Parent*/
 display: table;

/*immediate child*/
display: table-cell;
vertical-align: middle;

~拉胡尔·达克什

---

由于 vertical-align 在 td 上按预期工作，您可以在 div 中放置一个单元格的 table 以对齐其内容。

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

笨重，但据我所知。它可能没有其他解决方法的缺点。

---