如何在保持格式不变的情况下使ul居中

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

<div class="container">
  <ul>
    <!-- ul的内容 -->
  </ul>
</div>

<style>
  .container {
    position: relative;
  }
  ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

<div class="container">
  <ul>
    <!-- ul的内容 -->
  </ul>
</div>