CSS: Create one box inside another

Question

I am CSS beginner, want to create simple box and put another box exacly center of first box,

tried something like this

#first {
    width: 100px;
    height: 100px;
    background: red;
}
#first #second{
    width: 50%;
    height: 50%;
    background: green;
}

     
     <!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>BOX-EXAMPLE</title>
 </head>
 <body>
    <div id="first">
      <div id="second"></div>
     </div>
 </body>
</html>

but not as expected.

What have you tried? have you search about CSS alignment ??? .... Search a little with google you will fin pretty easy the answer — DaniP, Dec 29 '14 at 14:10
Search here for the answer [http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Mardzis, Dec 29 '14 at 14:10

score 7 · Answer 1 · answered Dec 29 '14 at 14:17

7

#first {
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}

#first #second{
    position: relative;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    background: green;
}

Fiddle

answered Dec 29 '14 at 14:17

lurker

56,987
9
69
103

1

Finally, a simple cross-browser answer. Why are people getting position absolute or translate into this? For a basic example such as this, that's not necessary. – Bram Vanroy Dec 29 '14 at 14:21
Not too keen on the `overflow: hidden;` although it does serve its purpose here. I suppose it all depends on what the OP wants to *do* with these elements – jbutler483 Dec 29 '14 at 14:35

jbutler483 · Answer 2 · 2014-12-29T14:49:20.203

Problem:

The issue you are having is that by default, your child elements align themselves to the top left of their parent element, and not in the center as you are expecting. In order to position your child element in the center (horizontally), you could use the css of:

margin: 0 auto;

which will place it horizontally in the middle.

Vertically aligning is slightly more difficult, as it involves ensuring it to be the correct from both top and bottom of your parent, so you could use:

top: 25%;

However, this should really only be used if your child is positioned in accordance to your parent div, and so we need to include position:absolute; into our child element.

However, if we do this, then it would be more beneficial to set it using both left and top properties, like so (in our child element):

position: absolute;
left:25%;
top:25%;

So, using this we come to our first solution:

Solution 1: Using positioning

By using absolute positioning, and making your parent have relative positioning, this will solve your problem.

#first {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
       }

       #first #second {
         position: absolute;
         width: 50%;
         height: 50%;
         background: green;
         left: 25%;
         top: 25%;
       }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>BOX-EXAMPLE</title>
</head>

<body>
  <div id="first">
    <div id="second"></div>
  </div>
</body>

</html>

Solution 2: Pseudo Effects

You may also want to use pseudo effects to reduce your markup (makes the page load slightly faster), and so we could use pseudo effects to a great beneficial degree (since we only use a single element instead of two):

This is shown below:

   #first {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
   }
   #first:after {
     content:"";
     width: 50%;
     height: 50%;
     background: green;
     position: absolute;
     left:25%;
     top:25%;
   }

<div id="first"></div>

Vitorino fernandes · Answer 3 · 2014-12-29T14:19:45.697

#first {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#first #second {
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="first">
  <div id="second"></div>
</div>

Or you can also use border

#first {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  border:15px solid red;
}

<div id="first"></div>

or you can also use pseudo element

#first {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  margin:50px;
}
#first:after{
  content:'';
  background: red;
  position:absolute;
  top:-20px;
  left:-20px;
  right:-20px;
  bottom:-20px;
  z-index:-1;
}

<div id="first">
  
</div>

the first two solutions stated are far too over the top for this. In fact, the last one is too. — jbutler483, Dec 29 '14 at 14:32

score 1 · Answer 4 · answered Dec 29 '14 at 14:13

One way is to use auto margin with absolute positioning:

#first #second {
    width: 50%;
    height: 50%;
    position: absolute; 
    margin: auto;
    background: green;
    top :0; left: 0; right: 0; bottom: 0;
}

Demo: http://jsfiddle.net/gzterxrd/

score 0 · Answer 5 · edited Dec 29 '14 at 14:51

0

You can do something like this

#second {
  width: 60px;
  margin: auto;
  background-color: green;
}

edited Dec 29 '14 at 14:51

jbutler483

24,074
9
92
145

answered Dec 29 '14 at 14:13

Pratyush Sharma

11
1

CSS: Create one box inside another

5 Answers5

Problem:

Solution 1: Using positioning

Solution 2: Pseudo Effects