如何将多个DIV与哪个字母列表对齐到中心

Question

<div class="main">
<div class="list">
<br>ABCD
<br>ABC
<br>AB
<br>A
</div>

<div class="list">
<br>ABCD
<br>ABC
<br>AB
<br>A
</div>
</div>

我希望这些DIV对齐到页面的中心（就像一个包含与页面中心对齐的列的表格），并且文本对齐应该保留（向左浮动）

我怎样才能使用css

Answer 1

使用此

.main{
    display:table;
    text-align:center;
    margin:0 auto;
    }
.main .list{
    text-align:left;
    display:table-cell;
}

Answer 2

在p标签中添加文字并提供以下css：

p {
    display: inline-block;
    text-align: left;
}
.main {
    text-align: center;
}

检查Fiddle.