css - 居中嵌套 float 元素

Question

我在将 float div 置于页面中心时遇到问题。 我的结构是这样的。

<header>
   <nav class="navbar" role="navigation">
      <div class="NavContainer">
         <div class="logo">
          image content here wrapped in a link
         </div>
         <div class="menu">
           Menu links here wrapped in ul's
         </div>
      </div>
   </nav>
</header>

对于这个小部分，我的 CSS 目前看起来是这样的: 然而，当我的宽度低于 768px 时，目的是将它们放在彼此的顶部。

 @media screen and (min-width: 576px) {
    .Menu {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .NavContainer {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .Logo {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    #menu-main-menu-1 {
        width: 479.5px;
        margin-left: auto;
        margin-right: auto;
    }
}

    @media screen and (min-width: 768px) {
        .Menu {
            margin-top: 1em;
            margin-left: 1em;
        }

        .NavContainer {
            width:720px;

        }
    }

    @media screen and (min-width: 992px) {
        .Menu {
            margin-top: 6em;
            margin-left: 5em;
            clear: none;
        }

        .NavContainer {
            width:920px;

        }

        #menu-main-menu-1 li:not(:first-child):before {
            content: "";
            margin-right: 5px;
        }
    }

    @media screen and (min-width: 1200px) {
        .Menu {
            width:625px;
            /*max-width: 625px;
            min-width: 625px;*/
        }

        .NavContainer {
            width:1140px;

        }

        #menu-main-menu-1 li:not(:first-child):before {
            content: "|";
            margin-right: 20px;
        }
    }

我一直在尝试很多不同的方法来解决这个问题，但在这种情况下，我通常可以使用的方法似乎都不起作用。是什么阻止我使用 float:left with margins-left 和 margins-right auto margins ？

编辑:

我用这个 css 解决了它。灵感来 self 在下面标记为解决方案的答案

.NavContainer {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
    }

    .Logo {
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }

    #menu-main-menu-1 {
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }

Answer 1

使用此代码

.NavContainer
{
display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}

<header>
   <nav class="navbar" role="navigation">
      <div class="NavContainer">
         <div class="logo">
          image content here wrapped in a link
         </div>
         <div class="menu">
           Menu links here wrapped in ul's
         </div>
      </div>
   </nav>
</header>