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

Question

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

我正在使用 display: table-cell; 进行垂直对齐。 div 和 p 元素在 CSS 中的定义方式相同。查看代码笔以了解问题。

<style>
  .outer { outline: 1px solid #eee; }
  .outer > p { 
    display: table-cell; 
    height: 200px; 
    vertical-align: middle;
    text-align: center;
  }
</style>
<div class="outer">
  <p>
    This longer text will be vertically aligned.
  </p>
</div>
<div class="outer">
  <p>
    This longer text will be vertically aligned and centered. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

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

Answer 1

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

你可以使用 flexbox 来简化事情。

Answer 2

您只需将包装 outer class 声明为 display: table 和 width: 100%... 子项 p 已设置作为 display: table-cell 自己。更新代码笔：http://codepen.io/anon/pen/VaoOJp

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

<div class="outer">
  <p>
    This longer text will be vertically aligned.
  </p>
</div>
<div class="outer">
  <p>
    This longer text will be vertically aligned and centered. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

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

How to center and vertically align text within a div?

css

vertical-alignment

centering