center a div of div within it without using margin auto

Question

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;
}

Answer 1

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;
}

Answer 2

Here's a cleaner solution.

with one HTML element only.

HTML:

<div class='circle'></div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.circle, .circle:after
{
    border-radius: 50%;
    border: 2px solid #DDD;
    text-align: center;
}
.circle
{
    width: 120px;
    height: 120px;
    font-size: 0;
}
.circle:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.circle:after
{    
    content:'+';
    font-size: 20px;
    padding: 20px 0; /* 2*padding + font size = innerCircle height*/
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

Answer 3

You had "float: left" in the inner circle, which you didn't need

//float: left;

Working fiddle

Answer 4

remove float left and use margin: 0 auto;

 .circle{

         position: relative;
         width: 120px;
         height: 120px;
         border-radius: 50%;
         border: 2px solid #DDD;
         margin:0 auto;
        }

Answer 5

Have a look at this fiddle . You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.

Answer 6

Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):

{
  position:absolute;
  left: calc( 50% - 261px );
  top: calc( 50% - 165px );
}