Home /css /Center an Absolute Div CSS and HTML /

Center an Absolute Div CSS and HTML

2:17 am, April 23, 2017

I had this problem the other day when trying to center a div, and it had to also be absolute too sit over the top of a slider.

Here is an easy fix.

Make the outer div absolute and then the inner div relative.

Set the outer div to left: 50%;

Set the inner div to left: -50%;

Done it should be .. in the middle of the screen. 

CSS

<style>
.the-outer-div {
position: absolute; left: 50%;
}
.the-inner-div {
position: relative; left: -50%; width:300px;
background: rgba(155,155,155,0.8);
border-radius: 10px;
padding:100px;
margin-top:20px;
text-align: center;
}
</style>

HTML

<div class='the-outer-div'>
<div class='the-inner-div'>
<p>Some Absolute Inner Centered Content.</p>
<p>Could be good for a modal or something?</p>
</div>
</div>

Codepen Demo

See the Pen Center An Absolute Div CSS And HTML by Luke (@kruxor) on CodePen.