CSS：居中父 ul 標簽，左對齊 li 標簽

Question

我在 ul 標記上設置高度，然后將其呈現為單獨的列。 我希望這個 ul 標記位於容器 div 的中心。 並且所有 li 標簽都左對齊。 到目前為止，我有這個：

.container {
  border: 2px solid green;
}
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  align-items: center;
}

<div class= "container">
  <ul>
    <li>item 1</li>
    <li>item 22</li>
    <li>item 333</li>
    <li>item 4444</li>
    <li>item 55555</li>
    <li>item 666666</li>
    <li>item 7777777</li>
    <li>item 88888888</li>
    <li>item 999999999</li>
    <li>item 10</li>
  </ul>
</div>

Answer 1

如果這是您的想法，請告訴我，否則請進一步解釋。

.container {
  border: 2px solid green;
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}

Answer 2

嘗試將 div 容器變成一個 flex-box，然后使用 align-items 使列表居中。

 .container { display: flex; flex-flow: column nowrap; align-items: center; }

 <div class= "container"> <ul> <li>item 1</li> <li>item 22</li> <li>item 333</li> <li>item 4444</li> <li>item 55555</li> <li>item 666666</li> <li>item 7777777</li> <li>item 88888888</li> <li>item 999999999</li> <li>item 10</li> </ul> </div>