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

我在尝试将列表与页面中心对齐时遇到问题，以使其与其余内容保持一致。我尝试了其他方法，但是它要么不起作用，要么与右侧对齐。

HTML：

<p>Digital Media:</p>

        <div id="list">
        <ul>
            <li>Tablet</li>
            <li>Tablet Pen</li>
            <li>Phone + my finger</li>
        </ul>
        </div>

<p>Tradtional Media:</p>

        <div id="list">
        <ul>
            <li>Notebook</li>
            <li>Pens</li>
            <li>Pencils</li>
            <li>Colored Pencils</li>
            <li>Fine-Tip Markers</li>
            <li>Canvas</li>
            <li>Watercolor Paint</li>
            <li>Acrylic Paint</li>
            <li>Various-Sized Paintbrushes</li>
        </ul>
        </div>

CSS：

ul {
   margin: 0 auto;
   width: 1200px;
   padding-left: 0;
   font-size: 0;
   justify-content: center;
}

li {
   font-size: 18px;
   list-style-type: none;
   width: 150px;
   height: 50px;
   line-height: 50px;
   margin: 15px 25px;
   box-sizing: border-box;
   text-align: center;
}

最佳答案

您可以更改代码：

li {
     ...
     margin: 15px auto;
     ...
}

并且在页面中，请勿将具有相同ID的多个元素

<div id="list"> => <div class="list">