纠缠不休的网页中div居中问题，求解决

Question

由上图可以看出，fristRow是占了一整行的，我猜这个是居中不了的原因，但是我之后设置#about>div{display:inline-block;}还是然并卵。
以下是“关于我们”的部分代码：

<div name="contentInJs" id="about">
        <div id="firstRow">
            <div class="circle"><img class="image" src="icon.jpg"></div>
            <div class="circle"><img class="image" src="icon.jpg"></div>
            <div class="circle"><img class="image" src="icon.jpg"></div>
        </div>
        <div id="secondRow">
            <div class="circle"><img class="image" src="icon.jpg"></div>
            <div class="circle"><img class="image" src="icon.jpg"></div>
            <div class="circle"><img class="image" src="icon.jpg"></div>
        </div>
        <div id="thirdRow">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

对应的css代码（注：下面的三个方法无效）：

.circle{
    display:inline-block;
    
    border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}
/*about--content3*/
#about{
    width:100%;
}
#about>div{
    /*margin: 0 auto;*/
    /*margin-left:auto;
    margin-right:auto;*/
    /*text-align:center;*/
}
#about>div>.circle{
    height:120px;
    width:120px;
    overflow:hidden;
    margin:30px 50px;
}
#about>div>.circle>img{
    height:120px;
    width:120px;
}
#about>div>.circle>img:hover{
}
#firstRow{
    background:#000;
}
/*--end content3--*/

还有另一个问题是完全居中的问题，就是垂直和水平都居中。不知道为什么，以前能用table＋margin: 0 auto就能达到居中效果，但现在margin: 0 auto和div却怎么都没用，我不知道哪里出问题了。求求各位大大，揭开这个缠绕了我很久的谜题啊，在此先谢过。

Answer 1

谢谢上面两位，我找到了水平居中的方法了，分享一下。
就是首先，把想要水平居中的元素的父元素设置为text-aglin:center;之后把它（们）设置为margin-left:auto;margin-right:auto;从而来实现水平居中。
但垂直居中暂时没有找到理想的方法。

Answer 2

1,水平不居中　是因为firstRow　需要一个宽度设置　才能通过　margin: 0 auto ;才能居中
2.垂直居中的话可以通过 伪类:befor 或者:after 相关设置来 控制垂直居中  
实现方式

参考 http://segmentfault.com/q/1010000003009506/a-1020000003009554

Answer 3

设置成 inline-block 以后元素默认的宽度为内容的宽度，也就是你设置的3个 .circle 的宽度。 所以不会居中， 你尝试把 div 的宽度设置成 33.3333%