CSS垂直alignment：中间不工作
我试图垂直居中另一个div元素中的span或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/
这似乎是最好的方式 – 从我原来的职位已经过去了一段时间，这是现在应该做的： 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; }
试试这个，对我很好：
/* 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;
使用CSS3：
<div class="outer"> <div class="inner"/> </div>
CSS：
.outer { display : flex; align-items : center; }
注意：这可能不适用于旧的IE浏览器
将行高设置为与包含div相同的高度也将起作用
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner { line-height:72px; border: 1px solid #000000; }
把.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">—</div> </div>
您应该在内部元素上放置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; }
小提琴
这里是一个伟大的文章如何veticalalignment..我喜欢浮法。
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; }
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上使用垂直alignment，并将其值设置为中间值。 这个子div内的任何内容都将被垂直居中。
这里有两种做垂直alignment方式的例子。 我用他们，他们工作得很好。 一个是使用绝对定位，另一个是使用flexbox 。
垂直alignment示例
使用flexbox，可以使用display: flex; 使用align-self 。 如果你需要水平alignment，你可以使用align-items和justify-content container在容器中。
如果您不想使用flexbox，则可以使用position属性。 如果你使容器相对而且内容是绝对的，内容将能够在容器内自由移动。 所以如果你使用top: 0; 和left: 0; 在内容中，它将位于容器的左上angular。
然后，要alignment它，只需要将顶部和左侧引用更改为50％。 这将从内容的左上angular将内容定位在容器中心。
所以你需要纠正这个内容的一半大小的左侧和顶部。
这很简单。 只需在主类中添加display:table-cell 。
.main { height: 72px; vertical-align: middle; display:table-cell; border: 1px solid #000000; }
看看这个jsfiddle ！
这里是最新的最简单的解决scheme – 不需要改变任何东西，只需将三行CSS规则添加到您希望集中的div容器中即可。 我喜欢Flex Box #LoveFlexBox
.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>
由于vertical-align在td上按预期工作，因此可以在div放置单个单元格table以alignment其内容。
<div> <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center"> Aligned content here... </td></tr></table> </div>
笨重，但据我所知，工作。 它可能没有其他解决方法的缺点。
只需将内容放置在高度为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>
