如何在div容器的中间垂直居中h1？

Question

正如在标题中所说的,我需要的是在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;
}

这是一个演示

使用显示表后,文本垂直居中,谢谢大家.现在我正面临一个新问题; (请看这里的jsffidle 请问我想要的是"文本1"和"文本2"并排显示,每个小蓝色div都在每个红色div中间的两个红色div下面..任何帮助请？

Answer 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; /* <--- */
}

小提琴

.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:Flexbox

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

小提琴

.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%);
}

小提琴

.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;
}

小提琴

.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>