CSS text align center vertically do not center

Question

Important:

My post is (normally) not duplicate. I found this, this, this and this post on Stack Overflow (and there are maybe all duplicates). I try the most common answer of this posts but it do not works. I also tried other ways but I can not achieve my goal.

So, I have a big div with a text:

 html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}

h1 {
    font-size:350%;
}

<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
    <h1 >Big text</h1> 
</div>

My problem is that I can not figure how can I put the text in the center (vertically+horizontally) of my gray div. As you can see, the text appear in the center (horizontally) of the div but not in the center vertically. I set the center (vertically+horizontally) on the body's part.

In my example, I try to align text vertically with the most common response of all this posts but it do not works. I already tried other ways, that we can find in the questions linked, but they do not work: we always have the same result.

I think I have this problem because I display my (gray) div on all the page. I tried on a normal div and the code works: my text is center vertically.

Short question:

How can I center vertically my text on the gray div?

Tell me if you have some questions.

Sphynx.

https://jsfiddle.net/5m0ux077/ – I haz kode Sep 06 '17 at 12:50 — I haz kode, Sep 06 '17 at 12:50

score 8 · Accepted Answer · answered Sep 06 '17 at 12:45

Using Flexbox you can set text vertically center in div

html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size:350%;
}

<div id="dimScreen">
    <h1 >Big text</h1> 
</div>

score 2 · Answer 2 · answered Sep 06 '17 at 13:01

You may also use the table-layout to include older browser .

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  display: table
}

#dimScreen {
  background: rgba(0, 0, 0, 0.5);
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

h1 {
  font-size: 350%;
}

<div id="dimScreen" style="">
  <h1>Big text</h1>
</div>

Note : vertical-align:center; is not a valid value. You probably wanted middle.

CSS text align center vertically do not center

2 Answers2