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

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.

codepen.io
6:33 pm, March 21, 2016 885 244 source

Comments

Reports

Add Report

Report's

KruXoR

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

@KruXoR

Minecraft

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