如何在 div 容器中间垂直居中 h1？ [复制]答案

【问题标题】：How to center vertically a h1 in middle of a div container? [duplicate]如何在 div 容器中间垂直居中 h1？ [复制]
【发布时间】：2016-01-26 13:20:38
【问题描述】：

正如标题中所说，我只需要在 div 中间将标题 h1 垂直居中。

这是一个非常简单的代码：

<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>

.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}

h1{
vertical-align:middle;
}

这是demo here

使用显示表格后，文字很好地垂直居中，谢谢大家。现在我面临一个新问题；（看看jsffidle here please 我想要的是“文本 1”和“文本 2”将并排显示，并且每个小的蓝色 div 都位于每个红色 div 中间的两个红色 div 下方.. 请帮忙？

【问题讨论】：

这绝对是重复的。
嗨@JustusRomijn，我得到了很好的答案（flex）
@Sushi 是的，但我可以将另一个问题标记为重复。已经有很多关于 SO 垂直居中的问题。一个快速的谷歌给我：stackoverflow.com/questions/19461521/…，stackoverflow.com/questions/8865458/…，stackoverflow.com/questions/10968726/…
你好@JustusRomijn 我刚刚在我的问题中添加了一个更新，请看看我真的很想让它工作，但它没有
@Sushi 然后创建另一个问题。它不再与您的原始问题相关。我们只是想让 SO 井井有条（尽可能...）

标签： html css

【解决方案1】：

解决方案 #1

将display:table;添加到容器，将display:table-cell;添加到h1

.container{
    width:500px;
    height:180px;
    background-color:red;
    text-align:center;
    display:table; /* <---- */
}

h1{
    vertical-align:middle;
    display:table-cell; /* <--- */
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
  display: table;
}
h1 {
  vertical-align: middle;
  display: table-cell;
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

解决方案 #2：弹性盒

.container{
    width:500px;
    height:180px;
    background-color:red;
    text-align:center;
    display: flex;
    align-items: center; /* align vertical */
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  /* align vertical */
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

解决方案 #3 - 转换

h1
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
}
h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

解决方案 #4 添加一个高度为 100% 的伪元素

.container:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
    display: inline-block;
    vertical-align: middle;
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
}
.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
  /* to counter inline-block whitespace */
}
h1 {
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>

</div>

【讨论】：

感谢 Daniel 提供的 2 个解决方案，我想我会使用 flex 再次感谢您
@Danield 您的 flexbox 解决方案不适用于小文本！将width:100%; 添加到h1 以允许使用小文本。