CODEWITHSUNDEEP
htmlcsscenter
bailey
bailey

Reputation: 363

Center div inside parent div

I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:

display: inline-block;

because I have seen other questions where this was used to center the div but I am not having luck.

BOX1 should be centered insdie of test

<div class="tab-pane" id = "test">
    <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
    <div id="BOX1">
  </div>
</div>


#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
    display: inline-block;
    width: 500px;
    height: 300px;
    background: lightgrey;  
    position:absolute;
    z-index:1;
}

#Box2{
    width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}

http://jsfiddle.net/bahanson/xvL2qvx0/5/

Upvotes: 0

Views: 146

Answers (5)

Moob
Moob

Reputation: 16184

Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.

This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.

#BOX1 {
    display: block;
    width: 500px; /* it will still work if you change the size */
    height: 300px; /* the dimensions could be percentages if you like */
    background: lightgrey;  
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

http://jsfiddle.net/xvL2qvx0/7/

#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
    width: 500px;
	height: 300px;
	background: lightgrey;	
	position:absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

#Box2{
  	width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}
<div class="tab-pane" id = "test">
    <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
    <div id="BOX1">
  </div>
</div>

Upvotes: 0

Dipali Patil
Dipali Patil

Reputation: 80

#BOX1 {
    display: inline-block;
    margin-left:100px;
    width: 500px;
    height: 300px;
    background: lightgrey;  
    position:absolute;
    z-index:1;
}

use margin-left command to adjust it to the centre....

Upvotes: 0

vrajesh
vrajesh

Reputation: 2942

try this :demo

#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
	margin:0 auto;
    width: 500px;
	height: 300px;
	background: lightgrey;	
	position:relative;
    z-index:1;
}

#Box2{
  	width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}
<div id="test" class="tab-pane">
    
    <div id="BOX1">
  <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
  </div>
</div>

Upvotes: 1

Bill Kindig
Bill Kindig

Reputation: 3622

You should read up on normal flow and CSS positioning.

http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm

But basically, a div will always position relative to the parent div.

If you add margin: 0 auto; to a div, it should horizontally position it within the parent div

Upvotes: 0

AndrewTet
AndrewTet

Reputation: 1182

Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.

left: 50%;
margin-left: -250px;

http://jsfiddle.net/xvL2qvx0/6/

If you don't need IE8 support you can just use:

left: calc(50% - 250px);

Upvotes: 0

Related Questions