html - CSS在具有可变高度的父项中居中文本

Question

所以基本上我需要居中（垂直）文本，但高度是可变的，因为它可以在多行上，我该怎么做？

我试过的：

.box {
  text-align: center;
  vertical-align: center;
}

.box {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 50%;
}

.box {
  margin: 50% auto;
  text-align: center;
}

我不知道这是否可能，或者我是否必须用 JS 来纠正它。

Answer 1

采用display:table-cell

.box {
  text-align: center;
  vertical-align: middle;
    background:black;
    color:white;
    height:200px;
    display:table-cell;
    width:450px
}

演示 - 单行

演示 - 多行

Answer 2

给你，垂直和水平工作。

HTML：

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>​

CSS：

   .area { 
      width: 300px; 
      height: 300px; 
      background: url(../images/abe-bg.png) no-repeat; 
      position: relative;
    }

    .bubble { 
      position: absolute; 
      left: 93px; 
      top: 21px; 
      width: 135px; 
      height: 84px; 
      display: table; 
    }

    .bubble p {
      display: table-cell; 
      vertical-align: middle; 
      text-align: center; 
    }​

演示