这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这是现在应该做的:

.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ ｝ 在{ 边框:1px实体#000000; 显示:表格单元; vertical-align:中间; ｝ < div class = "主" > <div class="inner">这个</div> . < / 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;
}

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

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

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

试试这个，对我很有效:

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

由于垂直对齐在td上可以正常工作，您可以在div中放置一个单格表来对齐它的内容。

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

很笨重，但据我所知还能用。它可能没有其他变通方法的缺点。

万一你不能依靠flexbox…把孩子放在父母的中心。当像素大小未知时(换句话说，总是如此)，在IE9+上也没有问题。

.parent{位置:相对的;｝ .child { 位置:绝对的; 上:50%; 左:50%; -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); ｝ <div class="parent" style="background: lightyyellow;填充:6 em”> <div class="child" style="background:gold;填充:1 em >本;< / div > < / div >

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

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

看看这个jsfiddle!

使用CSS3:

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

Css:

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

使用"justify-content: center;"来水平对齐元素

注意:这可能无法在旧的IE中工作

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

你应该把垂直对齐:中间放在内部元素，而不是外部元素。在外部元素上设置line-height属性以匹配外部元素的高度。然后在内部元素上设置display: inline-block和line-height: normal。通过这样做，内部元素上的文本将以正常的行高换行。支持Chrome, Firefox, Safari和IE 8+

.main { 身高:72 px; 行高:72 px; 边框:1px纯黑色; ｝ 在{ 显示:inline-block; vertical-align:中间; 行高:正常; ｝ < div class = "主" > <div class="inner">垂直居中的文本</div> < / div >

小提琴

这里有两种方法做垂直对齐的例子。我用过，效果很好。一个是使用绝对定位，另一个是使用flexbox。

垂直对齐示例

使用flexbox，你可以通过display: flex;使用align-self。如果你也需要水平对齐，你可以在容器中使用align-items和justify-content。

如果不想使用flexbox，可以使用position属性。如果容器是相对的，内容是绝对的，那么内容就可以在容器内自由移动。如果你用top: 0;左:0;在内容中，它将位于容器的左上角。

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

所以你需要纠正这个，将内容的一半大小平移到左边和上面。

这里是最新的最简单的解决方案-不需要改变任何东西，只需添加三行CSS规则到您的div的容器中，您希望居中。我爱FlexBox #爱Flex xbox

.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, which will align the child div to where the flex flow starts in its parent container. In this case, it will stay on top. center, which will align the child div to the center of its parent container. This is really neat, because you don't need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children. Because of that, this is the true vertical center (in the column flex-direction. similarly, if you change the flow-direction to row, it will become horizontally centered. flex-end, which will align the child div to where the flex flow ends in its parent container. In this case, it will move to bottom. space-between, which will spread all children from the beginning of the flow to the end of the flow. If the demo, I added another child div, to show they are spread out. space-around, similar to space-between, but with half of the space in the beginning and end of the flow.

只需要把内容放在一个高度为100%的表中，并为main 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>

我用这个来对齐包装器div中心的所有东西，以防它帮助任何人-我发现它最简单:

div.wrapper { /*——这是有效的——*/ 显示:flex; /*垂直对齐*/ 对齐项目:中心; /*水平对齐*/ justify-content:中心; /* --- ---------- ----- */ 宽度:100%; 身高:100 px; 背景颜色:蓝色; ｝ div.inner { 宽度:50 px; 高度:50 px; 背景颜色:橙色; ｝ < div class = "包装" > < div class = "内部" > < / div > < / div >

要在另一个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;
}

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

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

你也可以使用CSS网格(一个二维网格布局系统)。

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

你就可以开始了!

下面设置CSS

 /*Parent*/
 display: table;

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

~拉胡尔Daksh

这就是答案:

垂直对齐使元素相对于元素所在行的尺寸进行对齐。

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