Html 如何在不手动定义div宽度的情况下使div居中

我在div中有一些项目符号，我希望这些项目符号垂直对齐。我还希望div位于页面的中心。但是，我不想手动定义div的宽度，因为我事先不知道每个项目符号的大小。如何在不预先定义宽度的情况下使div居中

到目前为止，我掌握的代码是：

<div style='text-align:left;width:100px;margin:0 auto'>
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>

阿尔法
贝塔
伽马射线

可以在以下位置找到JSFIDLE

---

（注意，在此代码中，div宽度是手动定义的，我希望避免这种情况）。

将

text align:center

添加到父级，并将

text align:left

添加到div。我发现这在某些版本的IE中有所帮助。然后将

display:inline block

添加到div中

---

一种方法是使用

显示：table与
边距组合：0自动

使用
显示：内联块

css

加价

<div class="list">
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>



阿尔法
贝塔
伽马射线

这不会给div一个宽度；它仅跨越其父对象的整个宽度：
body
{
    text-align: center;
}

div
{
    background: yellow;
    text-align: left;
    margin: 0 auto;
    display: inline-block;
}

body
{
    text-align: center;
}

.list
{
    background: yellow;
    text-align: left;
    margin: 0 auto;
    display:inline-block;
}

<div class="list">
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>