html - 无法将多行文本与容器中间对齐

Question

我是css的新手，所以我没有办法制作容器（div）的文本中心。

我的 HTML 是

<div class="container">Some text goes over here.</div>

我尝试了text-align: center, 和vertical-align: middle，但没有运气。

有什么方法可以使文本在 Div 的中心对齐。

Answer 1

您可以使用display: table-cell和 将vertical-align: middle文本设置在容器的中间。

.divClass {
      width: 200px;
      height: 200px;
      border: 2px solid red;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
}

检查这里的工作。http://jsfiddle.net/32rD7/

Answer 2

利用Text-Align:center;

 <div class="container" style="Text-Align:center;">Some text goes over here.</div>

Answer 3

如果你不想应用各种 CSS hack，你可以看看（实验性的）flexbox 布局。

div.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

请注意，我省略了供应商前缀。