0

I want to center a div in the exact center of the page with CSS, now before you guys actually suggest me some of the google results, I know they don't work

This one for example:

top: 50%;
left: 50%;

This doesn't center a div, it centers it + the width + the height. How can I exactly center it in the middle? Here is my div:

<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;margin:0 auto;">
    <div class="draggable panel panel-pink">
        <div class="panel-heading" style="background-color: #B00049">
            Panel Title
        </div>
        <div class="panel-body">
            Panel Body
        </div>
    </div>
</div>

I also cannot use col-md with bootstrap so that's out of the queston. I also don't know the width or height of my div as it's passed via a parametrer

Liam Savage
  • 167
  • 12
  • 1
    you could do the old fashioned trick here of `margin-left:auto;` `margin-right:auto;` Though Im pretty sure if you're using bootstrap you can simply use the offset classes. – Option Feb 21 '17 at 15:21
  • just add transfom:translate(-50%,-50%); to your css – Chiller Feb 21 '17 at 15:23

1 Answers1

3

Use transform:translate(-50%,-50%);

<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;">
    <div class="draggable panel panel-pink">
        <div class="panel-heading" style="background-color: #B00049">
            Panel Title
        </div>
        <div class="panel-body">
            Panel Body
        </div>
    </div>
</div>

Demo is here

wscourge
  • 10,657
  • 14
  • 59
  • 80
Mattonit
  • 601
  • 7
  • 22