How to vertically and horizontally align a div into center of page

Question

I have read a quite a few tips on how to center an element or div on a page, but none of which seem to work. I've even made a JSFiddle to try it out:

http://jsfiddle.net/aLye7/

I'm sure it must be an easy answer, but I cant figure it out. Any help would be much appreciated.

<body>
  <div class="intro-area">
    <div class="intro-text">
      <p>This is a paragraph I want to center on the page.</p>
      <p>This is another paragraph I want to center on the page.</p>
    </div>
  </div>
</body>

.intro-area {
  background-color: #e7e7e7;
  display: table;
  text-align: center;
}

.intro-text {
  display: table-cell;
  vertical-align: middle;
}

Also, in the JSFiddle I'm dynamically pulling the height of the .intro-area div through the window.height function in javascript. That's how it's being used in my project.

Please look at existing answers before asking new questions. See: http://stackoverflow.com/search?q=vertical+and+horizontal+align+on+page — Diodeus - James MacFarlane, Jan 21 '14 at 20:54
http://stackoverflow.com/questions/20926514/make-thw-two-consecutive-div-in-the-center-of-the-container/20926932#20926932 — BuddhistBeast, Jan 21 '14 at 20:55
Feeling generous today: http://jsfiddle.net/aLye7/2/; fyi: js is unnecessary doing it this way. — brouxhaha, Jan 21 '14 at 20:56
@Diodeus does it make any difference that the parent div of the element I want to center is getting its height through JS? Because that's essentially why I asked instead after looking at other questions. No one else was doing this. — Kevin Stachura, Jan 21 '14 at 20:58
@brouxhaha Please do not post answers in the comments of a question. It makes it extremely hard for future users viewing the question to determine if it has been answered, and where that answer is. If you are going to answer a question, please, do it properly. — Ken Herbert, Jan 21 '14 at 21:06

score 0 · Accepted Answer · answered Jan 21 '14 at 21:40

For this specific case, add the following to force the html, body, and containing div to a height of 100%:

html, body, .intro-area {
    height: 100%;
}

And the following to remove the default padding and margin from html and body:

html, body {
    margin: 0;
    padding: 0;
}

No JavaScript necessary using this method.

DEMO

How to vertically and horizontally align a div into center of page

1 Answers1