如何将列表中心与html和css对齐？

<style>
    .container {
        display: flex;
        justify-content: center;
    }
</style>

<div class="container">
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</div>

<style>
    .container {
        display: grid;
        justify-items: center;
    }
</style>

<div class="container">
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</div>

<style>
    .container {
        text-align: center;
    }
</style>

<div class="container">
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</div>