Center a div in another div when parent div height is undefined

Question

I'm trying to center a div horizontally and vertically inside another div. My problem is that on window resize the width and height of parent div changes. For that, I have problems to center the div in the center of the parent div. Here is a case where I the width and height of the parent div is defined:

<div id="parent" style="">  
  <div id="child">Foo foo</div>
</div>

And the ccs:

#child {
  display: table;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:red;
  width:50px; 
  height:50px
}
#parent{
  background-color:blue;
  width:400px; 
  height:400px;
}

I don't know why it's so difficult to achieve it? JSFIDDLE

All ok just add position:relative; to your parent div . [ https://jsfiddle.net/tjbaezid/5osqyjge/1/ ] — Baezid Mostafa, Oct 08 '16 at 19:23

score 1 · Answer 1 · answered Oct 08 '16 at 18:13

1

here's one way to achieve it :)

https://jsfiddle.net/e4xhrvcf/

.parent{
  width:500px;
  height: 500px;
  background-color:red;
  display: flex;
  align-items: center;
}

answered Oct 08 '16 at 18:13

Lulceltech

1,662
11
22

In your fiddle, the child div is not centred, what if I use `display:block` in parent div? – Ritchie Oct 08 '16 at 18:21
Didn't you want it vertically centered? https://gyazo.com/b9f943889699e9fb0cd4aee78c0d0631 – Lulceltech Oct 10 '16 at 00:26

Syntac · Answer 2 · 2016-10-08T18:41:12.303

0

Use CSS-Flexboxes by setting display: flex; for the parent div, and setting margin: auto for the child div.
remove the top,bottom,right,left from the css.

edited Oct 08 '16 at 18:41

answered Oct 08 '16 at 18:14

Syntac

1,687
11
10

score 0 · Answer 3 · answered Oct 08 '16 at 18:15

0

If I understood what you want, I think you just need to add relative position to the parent in order to get absolute in the child to work:

#parent{
 background-color:blue;
 width:400px; 
 height:400px;
 position : relative;
}

answered Oct 08 '16 at 18:15

Sergeon

6,638
2
23
43

score 0 · Answer 4 · answered Oct 08 '16 at 18:17

http://codepen.io/anon/pen/rrdVbO

#parent{
  position: relative;
  background-color:blue;
  width:400px; 
  height:400px;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color:red;
  width:50px; 
  height:50px;
  transform: translate(-50%, -50%);
}

The parent needs to have a position definition for the child's absolute to work. Use top and left 50% to center the left top corner of the child and transform: translate(-50%, -50%) to move it back up and left by half of its own height and width.

score 0 · Answer 5 · answered Oct 08 '16 at 18:27

try this,

HTML

<div id="grandParent">
  <div id="parent">
    <div id="child">
    foo foo
    </div>
  </div>
</div>

CSS

html, body{
  height:100%;
}

#grandParent{
  display: table;
  min-height:100%;
  width:100%;
}

#parent{
 background-color:red;
 display:table-cell;
 text-align: center;
 vertical-align:middle;
}

#child {
 background-color:blue;
 display:table;
 margin:0 auto;
}

Fiddle

https://jsfiddle.net/guruling/7o764szj/2/

Center a div in another div when parent div height is undefined

5 Answers5