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

【问题标题】：How to center and vertically align text within a div?如何在 div 中居中和垂直对齐文本？
【发布时间】：2016-09-21 21:49:00
【问题描述】：

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

我正在使用display: table-cell; 进行垂直对齐。 div 和 p 元素在 CSS 中的定义方式相同。看看codepen就知道问题所在了。

<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

【问题讨论】：

标签： css vertical-alignment centering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您只需将包装outer 类声明为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>

【讨论】：