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/
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/
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`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.