为什么 vertical-align: middle 在我的 span 或 div 上不起作用？

Question

我正在尝试将另一个div元素中的span或div元素垂直居中。 但是，当我放置vertical-align: middle时，什么也没有发生。 我试过更改这两个元素的display属性，但似乎没有任何效果。

这是我目前在我的网页上所做的：

 .main { height: 72px; vertical-align: middle; border: 1px solid black; padding: 2px; }.inner { vertical-align: middle; border: 1px solid red; }.second { border: 1px solid blue; }

 <div class="main"> <div class="inner"> This box should be centered in the larger box <div class="second">Another box in here</div> </div> </div>

这是实现的 jsfiddle，显示它不起作用： http://jsfiddle.net/gZXWC/

Answer 1

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

 .main { display: table; /* optional css start */ height: 90px; width: 90px; /* optional css end */ } .inner { border: 1px solid #000000; display: table-cell; vertical-align: middle; }

 <div class="main"> <div class="inner"> This </div> </div>

Answer 2

使用 CSS3：

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

CSS：

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

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

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

Answer 3

试试这个，非常适合我：

/* 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;

Answer 4

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

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

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

Answer 5

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

 .parent { position: relative; } .child { position: absolute; top : 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform : translate(-50%, -50%); }

 <div class="parent" style="background:lightyellow; padding:6em"> <div class="child" style="background:gold; padding:1em">&mdash;</div> </div>

Answer 6

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

 .main { height: 72px; line-height:72px; border: 1px solid black; } .inner { display: inline-block; vertical-align: middle; line-height: normal; }

 <div class="main"> <div class="inner">Vertically centered text</div> </div>

小提琴

Answer 7

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

 div.wrapper { /* --- This works --- */ display: flex; /* Align Vertically */ align-items: center; /* Align Horizontally */ justify-content: center; /* --- ---------- ----- */ width: 100%; height:100px; background-color: blue; } div.inner { width: 50px; height: 50px; background-color: orange; }

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

Answer 8

这是一种现代方法，它利用了 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;
    }

你很高兴去！

Answer 9

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

垂直对齐示例

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

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

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

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

Answer 10

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 内的任何内容都将垂直居中。

Answer 11

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

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

Answer 12

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

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

看看这个jsfiddle ！

Answer 13

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

 .main { /* I changed height to 200px to make it easy to see the alignment. */ height: 200px; vertical-align: middle; border: 1px solid #000000; padding: 2px; /* Just add the following three rules to the container of which you want to center at. */ display: flex; flex-direction: column; justify-content: center; /* This is true vertical center, no math needed. */ } .inner { border: 1px solid #000000; } .second { border: 1px solid #000000; }

 <div class="main"> <div class="inner">This box should be centered in the larger box <div class="second">Another box in here</div> </div> <div class="inner">This box should be centered in the larger box <div class="second">Another box in here</div> </div> </div>

奖金

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

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

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

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

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

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

Answer 14

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

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

Answer 15

只需将内容放在高度为 100% 的表格中，并设置主 div 的高度

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Answer 16

要在另一个 div 中垂直居中 span 或 div 元素，请添加相对于父 div 的位置并将绝对位置添加到子 div。现在子 div 可以定位在 div 内的任何位置。下面的示例水平和垂直居中。

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS：

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 17

设置在 CSS 下面

 /*Parent*/
 display: table;

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

~拉胡尔·达克什

Answer 18

这是答案：

vertical-align 对齐元素相对于元素所在行的尺寸。

参考： https://christopheraue.net/design/why-vertical-align-is-not-working