如何在div中居中和垂直对齐文本？

Question

下面的代码垂直对齐div中的文本完全正常但是当我尝试将其居中时，只有需要包装的文本才会居中。当文本很短时，例如5-6个单词，文本不居中。我不知道这只是我还是我在这里做错了什么。

我正在使用(uint32_t)(0xFFFFFFFF)进行垂直对齐。 display: table-cell;和div元素都以相同的方式在CSS中定义。看看codepen来看问题。

p

http://codepen.io/anon/pen/vGowKL

Answer 1

.outer >p { 
 display: flex;
 height: 100%;
justify-content: center;
 align-items: center;
}

您可以使用flexbox简化操作。

Answer 2

您只需要将包裹outer类声明为display: table和width: 100% ...已将子p设置为{{ 1}}你自己。更新了代码集：http://codepen.io/anon/pen/VaoOJp

＆＃13;

＆＃13;

display: table-cell

＆＃13;

.outer { 
  outline: 1px solid #eee; 
  display: table; 
  width: 100%;
}
.outer > p { 
  display: table-cell; 
  height: 200px; 
  vertical-align: middle;
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;