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

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

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

使用CSS3:

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

Css:

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

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

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

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

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

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

看看这个jsfiddle!

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

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

只需要把内容放在一个高度为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>