/ home / css / center an absolute div css and html /

Center an Absolute Div CSS and HTML

6:33 pm, March 21, 2016 885 244 1.2 @ 200 wpmrate up KruXoR source

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. 


.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;
text-align: center;


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

Codepen Demo

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

6:33 pm, March 21, 2016 885 244 source



Add Report



This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..



Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links