Html 在css中居中div和/或ul

我有一个ul的问题。我可以把它放在中间，但现在不行了。 这是我的密码

.wrapper{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：50px 50px 50px 50px；
浮动：左；
}
.导航{
列表样式类型：无；
显示：内联块；
}
ulli{
文本对齐：居中；
浮动：左；
}

有时候我们添加了太多的CSS，然后就迷路了。 使用包装器是正确的方向，只需使用

flexbox

将所有子项居中即可

要垂直和水平居中，首先需要有一个至少与屏幕视图大小一样大的容器，否则，由于容器太小，元素将位于页面顶部。因此，请使用：

min-width: 100vw;
min-height: 100vh;

当您有更多的项目时，宽度和高度将增加，但项目仍将通过使用

flexbox

居中：

  display: flex;
  align-items: center;
  justify-content: center;

要在一行中列出所有

li

，请使用：

.nav>li {
  float: left;
}

从HTML正文中删除默认的填充边距：

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper{
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小宽度：100vw；
最小高度：100vh；
背景：绿色；
}
.导航{
列表样式类型：无；
背景：红色；
填充：0；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.nav>li{
浮动：左；
}
html，
身体{
保证金：0；
填充：0；
}

或者如果您想使用现有代码，只需将高度和宽度替换为100px而不是200px。

如果您想将任何div居中，请使用我刚刚尝试创建的简单登录页面的代码

    #divLogin
    {
        width: 450px;
        border-radius: 5px;
        font-size: 18px;
        padding: 10px;
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
    }

---

CSS：垂直居中？小菜一碟。水平居中？英雄联盟no@JSelser谢谢，但问题是它现在居中了，但是导航栏是垂直的，我不希望它是垂直的horizontal@majidmashmool确定检查更新的答案。我会解释的later@majidmashmool很乐意帮忙，我会补充一些解释非常有帮助，非常感谢。我想问一个问题，当我点击页面上的任何地方，导航就会变成蓝色，就像我选择的那样，这只是在firefox中发生的。你认为是什么原因造成的？@majidmashmool不确定发生了什么，尝试在不同的块中添加一些背景色以进行调试，同时尝试进行硬重新加载。有时你的页面可能缓存了旧样式，因此硬重新加载可能会有所帮助。或者，请通过显示任何图形来告诉我你想要哪种布局。你指的是什么高度和宽度？img标记的。它不知何故工作了，但也弄乱了我的整个页面！正如您所知，居中元素取决于代码中的其他东西，我相信