Vertical align div to viewport height

**keyboard** · 06-15-2016, 09:53 AM

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

**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?

**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)

**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:

Code:

<body style="background: green; ">

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


<div id="centered" style="background: red; color: white; padding: 10px; position: absolute">
The div is vertically and horizontally centered,<br>even without specifications for width and height.<br>The div is vertically and horizontally centered,<br>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!

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.

**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.