center a div of div within it without using margin auto

Issue

tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..

http://jsfiddle.net/st9AM/1/

.circle{

float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}

.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}

Solution

First of all, using margin: auto; is not a hack

And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.

Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.

To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;

Demo

---

Last but not the least, you should nest the span tag inside the inner circle div.

.circle{
   float: left;
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 2px solid #DDD;
}

.inner{
   text-align: center;
   line-height: 60px;
   position: absolute;
   top: 50%;
   margin-top: -31px;
   left: 50%;
   margin-left: -31px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 2px solid #DDD;
}

Answered By - Mr. Alien