如何将导航栏居中放置在屏幕上？

我的导航栏有问题。我需要将其放在屏幕中央，因此它位于所有内容的中间。但是我的导航栏只会在屏幕的左侧。

我试图使用Margin来解决此问题，但随后它将无法响应其余问题，因此无法正常工作。

这是我的导航栏代码：

HTML：

 <nav>
    <ul>
        <li>
            <a href="BlogTest.html">
                Home
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                About Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Contact Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Blog
            </a>
        </li>
    </ul>
</nav>  

忽略“ href”，它们将在之后进行排序

CSS：

    *{
    margin: 0%;
    padding: 0%;
    background-color: rgb(53, 53, 53);
    text-decoration: none;
}

nav{
    width: 100%;
    height: 100px;
    text-align: center;
    display: inline-block;
}

ul{
    text-align: center;
}

ul li{
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 100px;
}

ul li a{
    font-family: 'PT Sans', sans-serif;
    color: white;
    font-size: 200%;
    padding: 0px 20px;
    display: block;
    display: inline-block;}

ul li a:hover {
    color: red;
}

我确实阅读了其他一些回答过的问题，但是没有任何运气，希望您能再次帮助我！