CSS vertical-align：中间不起作用

Question

我正在尝试将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/

Answer 1

这似乎是最好的方式 - 自我原帖以来已经过了一段时间，这就是现在应该做的事情：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：

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}

Answer 2

试试这个，对我很有用：

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

使用CSS3：

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

的CSS：

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

注意：这可能不适用于旧IE＆＃39>

Answer 4

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

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

<强> HTML

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

<强> CSS

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

Fiddle

Answer 7

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

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

Vertical Align Example

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

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

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

所以你需要纠正这个问题，将内容的一半翻译成左边和右边。

Answer 9

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

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

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 11

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

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

查看此jsfiddle！

Answer 12

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>加成

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

• flex-start，它将子div与其父容器中的flex流开始的位置对齐。在这种情况下，它将保持最佳状态。

• center，它将子div与其父容器的中心对齐。这非常简洁，因为您不需要添加额外的div来包裹所有子项以将包装器放在父容器中以使子项居中。因此，这是 true 垂直中心（在column flex-direction中。同样，如果您将flow-direction更改为row，将成为水平居中的。

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

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

• space-around，类似于space-between，但在流程的开头和结尾有半空间。

Answer 13

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

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

Answer 14

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

要使一个span或div元素在另一个div中垂直居中，请添加相对于父div的位置和绝对位置到子div的位置，现在该子div可以放置在div内的任何位置。下面的示例在水平和垂直方向上居中。 / p>

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

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

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

你很好！