css - 如何将 iPhone 和所有网络浏览器的 css 菜单居中

Question

我在我的网站上使用了一个 css 菜单，当使用不同 iPhone 的 MacBook、iPad 时，菜单会四处移动，因此有时它们不会在屏幕上居中。目前，如果屏幕较小，菜单确实会环绕形成两层菜单，但它们不在屏幕中央。我对我当前的代码有点困惑，要更改什么以确保无论在哪个屏幕上查看菜单项都始终居中。任何帮助将不胜感激，因为我不是专业的编码员。

这里我有六个菜单，三个带有子菜单，三个带有直接页面链接。

<!-- Start css3menu.com BODY section -->
<ul  id="css3menu0"  class="topmenu">
    <li  class="topfirst"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu1</span></a>
        <ul  style="width: 145px;">
              <li><a  href="subpage1a.html">subMenu1a </a></li>
              <li><a  href="subpage1b.html">subMenu1b </a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu2</span></a>
            <ul  style="width: 145px;">
              <li><a  href="subpage2a.html"> subMenu2a</a></li>
              <li><a  href="subpage2b.html"> subMenu2b</a></li>
              <li><a  href="subpage2c.html"> subMenu2c</a></li>
              <li><a  href="subpage2d.html"> subMenu2d</a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="page3.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu3</a></li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu4</span></a>
          <ul  style="width: 145px;">
              <li><a  href="subpage4a.html"> subMenu4a</a></li>
              <li><a  href="subpage4b.html"> subMenu4b</li>
              <li><a  href="subpage4c.html"> subMenu4c</a></li>
          </ul>
     </li>
     <li  class="topmenu"><a  target="_blank"  href="https://www.instagram.com/xxx/" style="width: 130px; height: 15px; line-height: 15px;">Instagram</a></li>
     <li  class="toplast"><a  href="page6.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu6</a></li>
</ul>
<p  class="_css3m"><a  href="http://css3menu.com/">Creating CSS Menu Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

目前，菜单位置会根据屏幕宽度发生变化，这是人们所期望的，在较小的屏幕(例如 iPhone)上，菜单会换成两行。问题是它们没有在屏幕上居中。

Answer 1

创建一个容器并:

.container{
display: flex;
justify-content: center;
}