Absolute center a fluid div

Question

Good day.

I know that if you want to absolute center a div, you do this:

<div id="parent">
   <div id="child">blahblah</div>
</div>

CSS:

#parent{
   width: 500px;
   height: 500px;
   position: absolute; /*(or relative)*/
   top: 50%;
   left: 50%;
   margin-top: -250px;
   margin-left: -250px;
   text-align: center;
}

What if the parent div is a fluid div? How do you ABSOLUTE center it meaning:

#parent{
  max-width: 500px;
  max-height: 500px;
  top: 50%; ->is this right?
  left: 50%; -> is this right?
  margin-top: ???;
  margin-left: ???;
  text-align: center;
}

Is your #parent actually the child of the element your positioning to>? — David Barker, Mar 08 '13 at 11:38
the #parent div is the child to the body, or whatever div is its parent...depending on position relative or absoulte — David Van Staden, Mar 08 '13 at 11:50
Don't think you understood my question - You are providing me with a fixed with element. How do you do absolute positioning on a fluid element? - where the fluid element has a max-width/height limit? — David Van Staden, Mar 08 '13 at 11:58
By fluid, do you mean centering a div, when the parent float and may resize (responsive)? — Bertrand, Mar 08 '13 at 13:40

Mr_Green · Answer 1 · 2013-03-13T16:51:34.130

0

As the width and height are fluid, you need to go with javascript or jQuery. Just add the below code in head tag. (The below example is in javascript)

<script>
   window.onresize = function(){
      //To work even on resize
      getToMiddle();
   }
   window.onload = function(){
      getToMiddle();
   }

   function getToMiddle(){
      var box = document.getElementById('parent');
      var height = box.offsetHeight;
      var width = box.offsetWidth;
      box.style.top = -(height/2);
      box.style.left = -(width/2);
   }
</script>

and your css would be something like this:

#parent{
   max-width: 500px;
   max-height: 500px;
   background-color:green;
   position:absolute;
   top: 50%;
   left: 50%;
  /* width: 10%;
   height: 10%; */
}

To test, give width: 10%; and height: 10%

Working Fiddle

edited Mar 13 '13 at 16:51

answered Mar 08 '13 at 11:42

Mr_Green

40,727
45
159
271

Thanks but in your fiddle only the width resizes, only the height...and the text inside the box is not contained inside when resizing... – David Van Staden Mar 10 '13 at 15:57
@DavidVanStaden Give also `min-width` and `min-height`. Something like this in this fiddle http://jsbin.com/ewizad/10/edit – Mr_Green Mar 11 '13 at 03:37

score 0 · Answer 2 · answered Sep 27 '16 at 17:33

0

This can be done with CSS alone.

#parent {
  position: absolute;
  max-width: 500px;
  max-height: 500px;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

See demo https://jsfiddle.net/matharden/8kmvt8qd/

answered Sep 27 '16 at 17:33

matharden

757
6
15

score 0 · Answer 3 · answered Sep 27 '16 at 17:37

0

I'll simply use flex to achieve this...

#parent {
  display: flex;
  justify-content: center;
}

<div id="parent">
  <div id="child">blahblah</div>
</div>

answered Sep 27 '16 at 17:37

Pranesh Ravi

18,642
9
46
70

Absolute center a fluid div

3 Answers3

Linked