-1

Here's the website: jasontheodore.com

I am just trying to place some heading text directly in the center of a div that takes up 100% of the browser height. The code is as follows:

HTML:

<section id="landing-page">
   <div id="logo">
      <h5>Jason Theodore Bain</h5>
      <h4>graphic designer . marketer</h4>
   </div>
</section>

CSS: 

html, body { height: 100%;}

#landing-page {
     margin: 0;
     top: 0;
     left: 0;
     display: block;
     height: 100%;
     min-height: 100%;
     background: #fff;
 }

 #logo {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

So it's pretty simple stuff. Just need some input as to why my #landing-page section isn't 100% of the viewport height.

NOTE Another confounding variable in this situation may be the fact that I have a <div id="wrap"> with its overflow-x: hidden enveloping the entire page. It may not affect anything, but just pointing it out.

Here's the fiddle: http://jsfiddle.net/dodr6e18/

Jason Bain
  • 19
  • 3
  • body{ top:0; left:0 ;right:0 ;bottom:0 ;... – Steven Tomko Jun 16 '15 at 18:39
  • 1
    I answered this, but then subsequently deleted my answer since this question will more than likely get flagged as a dupe. If you google full screen div css you will get plenty of solutions for your problem. – Scott Sword Jun 16 '15 at 18:40
  • 2
    possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – Scott Sword Jun 16 '15 at 18:41
  • We all have to start somewhere, but keep in mind that others have had questions along the way while learning. Always Google and always search stack before posting. Welcome to stack overflow, recommended reading: http://stackoverflow.com/help/how-to-ask – Dan Beaulieu Jun 16 '15 at 18:47
  • Listen guys. Trust me, I've googled all of this. I am not new to Stack Overflow. None, of those things. As you can see from the code, the html is exactly as anywhere on Google would place it. So instead of focusing on the fact that it may be a duplicate. Look and see if there is an answer. Thank you kindly – Jason Bain Jun 16 '15 at 18:53
  • possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – apaul Jun 16 '15 at 19:22
  • definitely not a duplicate – Jason Bain Jun 16 '15 at 19:33
  • How is this not a dup? It looks like you tried to use one of the solutions offered on the page, failed, gave up, and assumed your problem was somehow unique. – apaul Jun 16 '15 at 19:36
  • Using the first method from the suggested duplicate: http://jsfiddle.net/dodr6e18/5/ – apaul Jun 16 '15 at 19:49
  • Also: http://meta.stackoverflow.com/questions/283163/removing-phrases-like-i-looked-everywhere-on-the-internet-and-i-did-not-find-an – apaul Jun 16 '15 at 19:50

2 Answers2

0

Try adding position:absolute to #logo:

 #logo {
   position:absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

A better approach would be using display:table to the container and table-cell to the child. Check this fiddle: http://jsfiddle.net/d7onc0jq/

gopalraju
  • 2,299
  • 1
  • 12
  • 15
  • previously I used position absolute. However, there is a
    with overflow-x: hidden; around the whole page, making absolutely positioned elements ignore the overflow-x: hidden;
     – Jason Bain Jun 16 '15 at 18:42
  • Can you post a fiddle? Also, did you try the display:table-cell trick posted above? – gopalraju Jun 16 '15 at 18:44
  • If your wrapper div doesnt have height 100% then all child divs with height 100% cant calculate 100% of undefined – Mladen Oršolić Jun 16 '15 at 18:44
  • If your problem is with the div not taking 100% of the browser height, using the vh unit might solve your issue. Check this: http://jsfiddle.net/d7onc0jq/2/ You don't have to add height:100% to all parent divs in this case. – gopalraju Jun 16 '15 at 18:47
  • Yes I had changed the wrapper to having a height of 100%. However, it renders the navigation menu useless and for some reason makes it extend over the scrollbar. – Jason Bain Jun 16 '15 at 19:06
0

As per discussion in comments, move the section just above the wrapper div and either:

(a) Make #logo absolutely positioned, with left: 20%

or better because it doesn't involve trial-and-error:

(b) Make #landing-page:

display: table;
width: 100%;

and #logo:

display: table-cell;
vertical-align: middle`
CupawnTae
  • 14,192
  • 3
  • 29
  • 60
  • yes but as you can see the text isn't in the exact center of the page. – Jason Bain Jun 16 '15 at 19:19
  • something like this? You can adjust the width and left of `#logo` as you see fit http://jsfiddle.net/dodr6e18/4/ – CupawnTae Jun 16 '15 at 19:29
  • yes but as I said before. The menu spills over on top of the scrollbar and becomes unresponsive (clicking the links won't work) – Jason Bain Jun 16 '15 at 19:35
  • ok, but it's impossible to fix a problem I can't see, so you'd need to reproduce that issue in a fiddle or elsewhere to have a hope of getting an answer. – CupawnTae Jun 16 '15 at 19:36
  • Alright, I uploaded the stylesheets as-is. You can see the whole thing at jasontheodore.com – Jason Bain Jun 16 '15 at 19:38
  • Are you trying to make the logo stay fixed relative to the browser viewport, or should it scroll with the page? – CupawnTae Jun 16 '15 at 19:45
  • It should scroll with the page. Originally I had taken the route where I position the element absolutely and then used percentage values to center it. However, on different browsers the absolute positioning was overriding the overflow-x rule. Also, thank you so much for following through with this question. – Jason Bain Jun 16 '15 at 19:48
  • So, the body height changes with the viewport, but your wrapper div is the entire height of the page (much taller), and presumably needs to stay that way. Do you want the logo (a) halfway down the *page* (i.e. initially offscreen) or (b) half a body-height (minus half the logo height) from the top? I'm guessing (b), but then you have your issue - percentage heights inside `#wrap` will refer to percentages of the div's height, which is huge. Do you have the option of moving the `section` *outside* the `#wrap`? – CupawnTae Jun 16 '15 at 19:54
  • Yeah the section was initially outside of the wrap. Which, combined with the rest of the css. Left me with a very problematic looking page haha. Essentially, the section should be 100% of the viewport height and the text should be in the center of that section. If there were a way to move the section out of the #wrap while still keeping structural integrity it would be great – Jason Bain Jun 16 '15 at 20:02
  • So, here's what I did in Chrome web inspector: dragged the section out to just above the `#wrap`, added `position: absolute` back into `#logo`, and changed the `left` on `#logo` to `25%`, and it looks pretty good to me, in Chrome at least. Does that not work for you? – CupawnTae Jun 16 '15 at 20:08
  • It works a bit. The text is offset just a little. I'll try and tweak the percentages. – Jason Bain Jun 16 '15 at 20:14
  • Alright I adjusted it to 20% and it was centered. Thanks alot man – Jason Bain Jun 16 '15 at 20:18
  • Wait, there's a better solution :) – CupawnTae Jun 16 '15 at 20:19
  • You can use @gopalraju's suggestion, combined with the restructure above. On `#landing-page` use `display: table; width:100%`, and then on `#logo` use `display: table-cell; vertical-align: middle` - get rid of the `position`, `left`, `top` and `transform` on `#logo` – CupawnTae Jun 16 '15 at 20:20