How to center vertically a h1 in middle of a div container? [duplicate]

Question

as said in the title all i need is centering vertically a title h1 in the middle of a div.

this is a very simple code :

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

This is a demo here

After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?

Answer 1

Solution #1

Add display:table; to container and display:table-cell; to 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>

Solution #2 : Flexbox

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

Solution #3 - Transforms

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>

Solution #4 Add a Pseudo element with 100% height

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