Resolved Vertical align div to viewport height [Archive]

View Full Version : Resolved Vertical align div to viewport height

keyboard

06-15-2016, 09:53 AM

Hey all.
I have a div and a wrapper -

<div class="lTagLineWrapper">
<div class="iTagLine">

</div>
</div>

that is positioned absolutely from the top of the page.

.lTagLineWrapper {
position:absolute;
left:50%;
top:40%;
}

.iTagLine {
position:relative;
left:-50%;
width:600px;
text-align:center;
font-size:3em;
background-color:red;
}

to put the iTagLine in the middle of the screen even while zooming.

Only problem is when you scroll down the page, the div stays in its position on the screen (because of the position:absolute;).
Any way to position it relative to the top of the page without impacting the flow of other elements on the page without using position:absolute;? (or some other fix)

Thanks,
keyboard

Beverleyh

06-15-2016, 11:10 AM

Hi keebs,

Do you have an illustration that shows what you'd like to happen as I'm not sure what you're describing. Maybe make a live, editable mockup in JSBin, CodePen or JSFiddle too?

keyboard

06-15-2016, 12:15 PM

Does this help?
http://files.f-o-g.eu/2dfca2333dc68fa0g409eeffcb933bef

Beverleyh

06-15-2016, 12:52 PM

Yup: http://jsbin.com/watolapiri/1/edit?html,css,output

I'm loving The Easy Way to Absolute Center (vertical + horizontal alignment) (http://www.dynamicdrive.com/forums/entry.php?333-The-Easy-Way-to-Absolute-Center-(vertical-horizontal-alignment)) ;)

molendijk

06-15-2016, 01:14 PM

If you want a solution that doesn't force you to specify the dimensions of the centered element, you could do this:

<body style="background: green; ">

<div style="background: pink; height: 100vh; padding: 15px">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div>

<div id="centered" style="background: red; color: white; padding: 10px; position: absolute">
The div is vertically and horizontally centered, even without specifications for width and height. The div is vertically and horizontally centered, even without specifications for width and height.
<script>
document.getElementById('centered').style.top=window.innerHeight/2-document.getElementById('centered').clientHeight/2+'px'
document.getElementById('centered').style.left=window.innerWidth/2-document.getElementById('centered').clientWidth/2+'px'
var windowWidth = window.innerWidth;
window.onresize=function()
{
if(windowWidth != window.innerWidth)
setTimeout("location.reload()",10); return
}
</script>
</div>

</body>

Beverleyh

06-15-2016, 02:31 PM

If you don't want to specify width and height of the centered element, you could also use my "go to" centering method that's noted at the top of the previous blog post - the one using transform:translate http://jsbin.com/jipepojiyi/1/edit?html,css,output

Another option could be to use a CSS-table http://jsbin.com/nihowuyaca/edit?html,css,output

There are loads more ways to center with CSS here too https://css-tricks.com/centering-css-complete-guide/ :)

keyboard

07-06-2016, 07:21 AM

Guess who's computer just got fixed! :cool:

Bev I went with the

position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);

But in my example the div stays in the center of the screen as you scroll.
In the jsbin is scrolls with the page.

http://i.imgur.com/Q4swldg.png

Beverleyh

07-06-2016, 10:11 AM

It might be that you need to 'trap' it in the parent container. position:relative; on the parent element should do that.

If that doesn't fix it, we'd need a full sample to tinker with.