试试这个，对我很有效:

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

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

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

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

.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ ｝ 在{ 边框:1px实体#000000; 显示:表格单元; 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.

只需要把内容放在一个高度为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中垂直居中一个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;
}