Css Flexbox徽标疯狂运行：多元素导航中的元素居中

现在，我已经在一些网站上找到了解决这个问题的方法。是公开提问的时候了

我有一个带有一些元素的导航栏。其中一个标志需要保持居中

我使用flexbox。是否可以使用flex规则实现这一点，而无需借助绝对定位？在小屏幕上，这对我来说永远不起作用，因为元素将开始相互叠加

下面是一个关于确切问题的示例，后面是我的标题标记

<header role="banner">
  <button>Button</button>

  <h1>
    <a href="/">
      <img class="logo" src="http://pre04.deviantart.net/239a/th/pre/i/2014/106/6/c/random_logo_by_criticl-d7eqdvw.png" alt="Logo">
    </a>
  </h1>

  <nav role="navigation">
    <ul class="primaryNav">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
    </ul>

    <ul class="secondaryNav">
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg></a></li>
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg></a></li>
      <li><a href="#"><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg></a></li>
    </ul>
  </nav>
</header>

按钮

您可以将横幅的三个部分用一个

div来包装，如下所示：

<header role="banner">
   <div class="banner-block">
      ...
   </div>
   <div class="banner-block">
      ...
   </div>
   <div class="banner-block">
      ...
   </div>
</header>

<>和<>代码> H1
h1 {
   margin: 0 auto;
}

查看此更新的
谢谢！这比“位置：绝对”要好得多，但如果空间不够，这些元素仍然彼此重叠
h1 {
   margin: 0 auto;
}