CODEWITHSUNDEEP
htmlcss
Stack Overflow 421
Stack Overflow 421

Reputation: 95

How can I center a div inside another div, what is the simplest way?

I am trying to center a blue box perfectly inside it's parent div and I want to make sure I'm doing this the easiest way possible. I had to do some simple math to know what px's to set the width and height of the blue box, just want to see if there is an easier way. For example to center a div width wise I can do "margin: auto" is there something like this for height?

Here is the fiddle: http://jsfiddle.net/u2c64b52/

My css code is below: 

#container {
 width: 500px;
 height: 500px;
 background-color: lightgreen;
 margin: 0 auto;
 position: relative;
}

#box1 {
 width: 50px;
 height: 50px;
 background-color: red;
 position: absolute;
 right: 0;
}

#box2 {
 width: 50px;
 height: 50px;
 background-color: blue;
 margin: auto;
 margin-top: 225px;
 margin-left: 225px;
 position: absolute;    
}

Upvotes: 0

Views: 85

Answers (5)

Dan
Dan

Reputation: 152

Just use margin: 0 auto; for the box inside the parent box. No maths required and it'll be in the centre. No need for complicated stuff. Make sure that it's the only margin attribute on the box CSS though.

So this will cause issues...

margin: 0 auto;
margin-left: 10px;
margin: right: 10px;

Just have...

margin: 0 auto;

Upvotes: -1

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

You can do it without CSS just use jQuery:

var container = $('#container');
$('#container div').each(function () {
    var $this = $(this);
    var top = (container.width() / 2) - $this.width() / 2;
    var left = (container.height() / 2) - $this.width() / 2;
    $this.css({
        top: top,
        left: left
    });
});

Demo

Upvotes: -2

kudeiro
kudeiro

Reputation: 36

if the container is relative:

    #box1 {
      width: 50px;
      height: 50px;
      background-color: red;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

Updated fiddle: http://jsfiddle.net/u2c64b52/3/

Upvotes: 1

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

if you just want to center some text horizontaly and verticaly you should set parent text-align to center and it's line-height to height of parent

#container {
    width: 500px;
    height: 500px;
    background-color: lightgreen;
    margin: 0 auto;
    line-height: 500px;
    text-align: center;
}

#box1 {
    display: inline;
    width: 50px;
    height: 50px;
}

Demo

Upvotes: 1

Madara's Ghost
Madara's Ghost

Reputation: 174957

Simplest way? Flexbox. Doesn't work on IE 10 or less, and I didn't include vendor prefixes:

#outer {
  background: red;
  width: 400px;
  height: 400px;
  display: flex; /* These three lines make the magic happen */
  justify-content: center;
  align-items: center;
}
#inner {
  width: 200px;
  height: 200px;
  background: blue;
}
<div id="outer">
  <div id="inner">Lorem ipsum</div>
</div>

Upvotes: 3

Related Questions