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

我正在尝试将一个span或div元素垂直居中放置在另一个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/

这似乎是最好的方法-自我的原始文章以来已经过去了一段时间，现在应该这样做：http : //jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

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

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

使用CSS3：

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

CSS：

.outer {
  display : flex;
  align-items : center;
  justify-content: 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 { 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>

您应该放置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>

小提琴

我用它来对齐包装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>

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

垂直对齐示例

使用Flexbox的，你可以通过自己的另一个元素中与之对齐的元素display: flex;使用align-self。如果您还需要水平对齐，可以使用align-items和justify-content在容器中。

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

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

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

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

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

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

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

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

看看这个jsfiddle！

这是最新的最简单的解决方案-无需更改任何内容，只需将三行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，但在流程的开始和结束处只有一半的空间。

由于vertical-align预期上的作品td，你可以把一个单细胞table在div对齐其内容。

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

笨拙，但据我所知可以正常工作。它可能没有其他解决方法的缺点。

只需将内容放入高度为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>

要将一个span或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;
}

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

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

而且你很好！