Vertical align div to viewport height

Printable View

06-15-2016, 09:53 AM
keyboard

Vertical align div to viewport height

Hey all.
I have a div and a wrapper -

HTML Code:

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

that is positioned absolutely from the top of the page.

Code:

.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
06-15-2016, 11:10 AM
Beverleyh

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?
06-15-2016, 12:15 PM
keyboard

Does this help?
http://files.f-o-g.eu/2dfca2333dc68fa0g409eeffcb933bef
06-15-2016, 12:52 PM
Beverleyh

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

I'm loving The Easy Way to Absolute Center (vertical + horizontal alignment) ;)
06-15-2016, 01:14 PM
molendijk

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

Code:

<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>
06-15-2016, 02:31 PM
Beverleyh

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/ :)
07-06-2016, 07:21 AM
keyboard

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

Bev I went with the

Code:

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
07-06-2016, 10:11 AM
Beverleyh

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.