0

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.

Kevin Stachura
  • 83
  • 8
  • 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
  • 1
    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

1 Answers1

0

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

brouxhaha
  • 4,003
  • 1
  • 19
  • 22