CSS：垂直居中和溢出内容

Question

我正在使用http://css-tricks.com/centering-in-the-unknown/

中的垂直居中代码

问题在于，当内容变得越来越长时，它就会变得开箱即用而不是破坏这条线。

<div class="reach align-middle">
  <div class="align-block">
    <div>block3</div>
    <div>Long Description Long DescriptionLong DescriptionLong DescriptionLong Description</div>
  </div>
</div>

.reach{
  -moz-box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 1px solid black;
  height: 200px;
  margin-bottom: 100px;
}

.align-middle:before{
  content: "";
  height: 100%;
  margin-right: -0.25em;
}

.align-middle:before, .align-middle .align-block {
  vertical-align: middle;
  display: inline-block;
}

更新： 它没有在Firefox中破解，但在Chrome中也是如此。这很奇怪。

Answer 1

问题是html 5中的重要空白。

查看updated fiddle

.align-middle {
    font-size: 0;
}

.align-block {
    font-size: 18px;
}

基本上，我们需要在父级上将font-size设置为0，因此空格不会占用任何空间。然后把它设置回孩子的理智尺寸......

哦，我们不再需要负余量了......

Answer 2

也许很容易猜到小提琴。希望这可以提供帮助。

.align-middle:before, .align-middle .align-block {
  margin:0 auto;
  vertical-align:middle;
  display:inline-block;
  position:relative;
}