万一你不能依靠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 >

由于垂直对齐在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>

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

你应该把垂直对齐:中间放在内部元素，而不是外部元素。在外部元素上设置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 >

小提琴

这里是最新的最简单的解决方案-不需要改变任何东西，只需添加三行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.

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

垂直对齐示例

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

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

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

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

下面设置CSS

 /*Parent*/
 display: table;

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

~拉胡尔Daksh