how do you center, both, absolute div within absolute div?

Question

Here is jsfiddle: http://jsfiddle.net/techsin/1o5zzcgh/

I want to center two absolutely positioned divs inside each other without using jquery. Right now I'm using top:0, and bottom 0 but when height is defined this doesn't work.

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.in {
    background-color: red;
    height: 50%;
}
.out {
    background-color: blue;
}

Same way you would center any absolute div. There are many similar questions on SO. — Paulie_D, Mar 21 '15 at 19:29
possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Paulie_D, Mar 21 '15 at 19:32

score 2 · Answer 1 · answered Mar 21 '15 at 19:36

You can use this little hack:

HTML:

    <div class="out">
    <div class="in">
    </div>
</div>

CSS:

.in, .out {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
.in {
   background-color: red;
   height: 50%;
   left: 50%;
   top: 50%;
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);  
}
.out {
  background-color: blue;
}

By using left / top along with translate minus values you can center as you wanted.

HTH.

score 1 · Accepted Answer · answered Mar 21 '15 at 19:56

1

You need to add margin:auto; to the absolute positioned divs and then apply height:50%; and width:50%; to .in div.

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;  
}
.in {
    background-color: red;
    height: 50%;
    width:50%;
 }
.out {
    background-color: blue;
}

JSFIDDLE: http://jsfiddle.net/a_incarnati/1o5zzcgh/1/

You can also set a height, but then you need to remember that since the container it's 100%, it will not be a square.

answered Mar 21 '15 at 19:56

Alessandro Incarnati

7,018
3
38
54

didn't know margin auto worked on absolute divs with t,b,r,l 0 trick. and it even works for vertical/height part whereas normally it just works for horizontal. – Muhammad Umer Mar 21 '15 at 20:01
I have used it many times in commercial projects. For example this technique is useful if you have an absolute position div to center inside its container. Let's say you want to add an icon play on an overlay of a video you can absolutely center it, both vertically and horizontally. – Alessandro Incarnati Mar 21 '15 at 20:02
@AlexIncarnati, nice technique. But as I understand it only works with left/right/top/bottom set to 0 ? If I'll change one of this values to the number / percentage larger than 0 it won't work . – Konrud Mar 21 '15 at 20:12
@Konrud: Correct, you need to specify all of them. It supports >= IE8 – Alessandro Incarnati Mar 21 '15 at 20:15

score 0 · Answer 3 · answered Mar 21 '15 at 19:35

0

Are you referring to something like this?

    * {
    margin: 0;
    padding: 0;

}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.in {
    width: 50%;
    height:50%;
    top: 20%;
    left: 20%;
    background-color: red;
}
.out {
    background-color: blue;
}

Demo

answered Mar 21 '15 at 19:35

way2vin

2,411
1
20
15

even top margin is based on width of parent, which means it can only work for centering if width of the element is equal to its height, meaning a square. But most layouts can't be fitted into a square. – Muhammad Umer Mar 21 '15 at 19:53

how do you center, both, absolute div within absolute div?

3 Answers3