4

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 ?

Sushi
  • 646
  • 1
  • 13
  • 31
  • This definetely is a duplicate. – Ionut Necula Oct 27 '15 at 08:24
  • Hi @JustusRomijn here i get great answer (flex) – Sushi Oct 27 '15 at 08:26
  • @Sushi yes, but I could just mark one other question as the duplication. There are ton's of questions regarding vertical centering on SO already. A quick google gives me: http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically, http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css, http://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-center-of-the-content-of-a-div-with-defined-widt – Justus Romijn Oct 27 '15 at 08:27
  • hello @JustusRomijn i just added an update in my question please take a look i'm really trying to make it work but it doesn't – Sushi Oct 27 '15 at 10:23
  • @Sushi create another question then. It is no longer related to your original question. We're just trying to keep SO organized (as far as that is possible...) – Justus Romijn Oct 27 '15 at 10:26
  • Thank you justus you're right – Sushi Oct 27 '15 at 10:28

1 Answers1

9

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>
Danield
  • 121,619
  • 37
  • 226
  • 255