h5-设置div内所有的子元素水平居中

开发的时候可能会碰到这样的一个需求，要求div标签内的子元素全部水平居中，先上个图看看效果

比如像这样，红框内的多个元素，要求做到水平居中的效果。
直接贴代码

  <div class="foot-area">
        <div class="list">
            <a href="http://www.icbc.com.cn/icbc/"><div>工商银行</div></a>
            <a href="http://www.95599.cn/cn/"><div>农业银行</div></a>
            <a href="http://www.ccb.com/cn/home/index.html"><div>建设银行</div></a>
            <a href="http://www.95559.com.cn/"><div>交通银行</div></a>
            <a href="http://www.boc.cn/"><div>中国银行</div></a>
            <a href="http://www.cmbchina.com/"><div>招商银行</div></a>
            <a href="http://www.psbc.com/portal/zh_CN/index.html"><div>邮政银行</div></a>
            <a href="http://www.cmbc.com.cn/"><div>民生银行</div></a>
        </div>
  </div>

.footBar{
	background: url('../images/bg-footer.jpg') no-repeat;
	background-size: cover;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.footBar .topList{
	width: 80%;
	margin: 0 auto;
	padding: 0 0 10px 0;
	overflow: hidden;
	text-align: center;
}
.footBar .topList a div{
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    margin-right: 5px;
    margin-top: 10px;
    background:white;
}

像这样里面的子元素设置成a标签，然后a标签内放一个div写按钮的样式，然后父元素加一个text-align:center就可以了