将 div and/or ul 在 css 中居中

Question

我对 ul 有疑问。我可以把它居中，但现在我不能。这是我的代码

.wrapper{
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    padding: 50px 50px 50px 50px;
    float: left;
}
.nav{
    list-style-type: none;
    display: inline-block;
   
}

ul li{
    text-align:center;
    float: left;
}

<div class="wrapper">
<ul class="nav">
 <li><a href='#'><div class="wrap"><img src="img/13.jpg" alt="" width="200"    height="200" class="w1"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/11.jpg" alt="" width="200" height="200" class="w2"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/12.jpg" alt="" width="200" height="200" class="w3"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/14.jpg" alt="" width="200" height="200" class="w4"></div></a></li>           
</ul>
  
            </div>

我尝试只使用 ul，但我决定使用包装器元素，但我仍然不知道该怎么做。我想让它垂直和水平居中。

Answer 1

有时我们添加了太多 CSS 而迷路了。使用包装器是正确的方向，只需使用 flexbox 将所有子项居中。

要垂直和水平居中，首先你需要有一个至少和屏幕视图大小一样大的容器，否则你的元素会因为容器太小而在页面顶部。所以使用：

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

当你有更多的项目时，宽度和高度会增加，但项目仍然会通过使用 flexbox:

居中

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

要在一行中列出所有 li，请使用：

.nav>li {
  float: left;
}

从 HTML body:

中删除默认填充边距

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

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100vw;
  min-height: 100vh;
  background: green;
}

.nav {
  list-style-type: none;
  background: red;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav>li {
  float: left;
}

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

<div class="wrapper">
  <ul class="nav">
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
  </ul>
</div>

Answer 2

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

Answer 3

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

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

将 div and/or ul 在 css 中居中

centering a div and/or ul in css

html

css

centering