如何将整个 div 标签及其元素居中？答案

【问题标题】：How to center the entire div tag along with it's elements?如何将整个 div 标签及其元素居中？
【发布时间】：2016-10-10 22:24:35
【问题描述】：

我需要将 div 标签及其元素居中。我试过给宽度和边距左：自动；和边距顶部：自动；但它不起作用！

我需要将 div 垂直居中。

HTML：

 <div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

CSS：

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
}

.nav ul li {
  margin: 0px;
  list-style: none;
}

.nav ul li a {
  float: left;
  display: inline-block;
  margin: 0px 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}

目前的状态：

现在可以了，感谢饥饿星和尼克 R 的回答，也感谢其他人。 @hungerstar：垂直对齐 div：https://jsfiddle.net/e6aq6f1w/3/ @nick-r : 水平对齐 div 的元素：https://jsfiddle.net/f4fjxxj8/

【问题讨论】：

如果你的 .nav 元素占据了视口的整个宽度，那么它就可以工作了。
不。我只需要将 div 和 div 的元素垂直居中对齐。
相信我，你的 div 是居中的。这并不意味着内部元素也会。如果 DIV 占据了视口的整个宽度，则很难看出这实际上是发生了什么，与this JSFiddle example. 进行比较。 .nav 不需要 width: 100%;，因为 DIV 是块级元素，默认为 100% 宽度。我相信您的实际问题是如何使 DIV 的元素居中，而不一定是 DIV 本身。
我需要将 div 垂直居中！
我不确定这意味着什么。所以你想让它在页面中间居中？ my JSFiddle 中的蓝色 DIV 水平居中，但您不希望这样吗？你需要this example 中的黄色 DIV 之类的东西吗？

标签： html css tags margin padding

【解决方案1】：

删除float:left并用display:inline-block;替换它，然后在父ul上添加text-align:center - https://jsfiddle.net/f4fjxxj8/

【讨论】：

您是否将display:inline-block; 添加到.nav ul li ？

【解决方案2】：

使用 css flexbox。将以下css添加到ul。

.nav ul {
    justify-content: center;
    display: flex;
}

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0;
  padding: 10px 0;
  justify-content: center;
  display: flex;
}

.nav ul li {
  border: 1px solid #000;
  margin: 0;
  list-style: none;
}

.nav ul li a {
  display: inline-block;
  margin: 0 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}

<div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

【讨论】：

【解决方案3】：

从.nav ul li a 中删除float: left; 并将display: inline-block 放入.nav ul li 中

【讨论】：

【解决方案4】：

这是垂直和水平居中和页面中间元素的一种解决方案。您将需要使用固定定位和平移。

.nav {
  /* centering start */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* centering end */
  display: inline;
  background-color: #aed003;
}
.nav ul,
.nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul {
  padding: 0 5px
}
.nav li {
  float: left;
  padding: 10px 5px;
}
.nav ul li a img {
  display: block;
  max-height: 50px;
  max-width: 50px;
}

<div class="nav">
  <ul>
    <li>
      <a href="http://twitter.com/login">
        <img src="http://placehold.it/75x75?text=one">
      </a>
    </li>
    <li>
      <a href="http://quora.com">
        <img src="http://placehold.it/75x75?text=two">
      </a>
    </li>
    <li>
      <a href="http://youtube.com">
        <img src="http://placehold.it/75x75?text=three">
      </a>
    </li>
    <li>
      <a href="http://web.whatsapp.com">
        <img src="http://placehold.it/75x75?text=four">
      </a>
    </li>
    <li>
      <a href="http://shreydan.tumblr.com">
        <img src="http://placehold.it/75x75?text=five">
      </a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案5】：

好的，由于这个问题的答案由不同的人回答，这是最终的解决方案：

nick-r : 用于将 div 的元素水平居中对齐：

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
  text-align:center;
}

.nav ul li {
  margin: 0px;
  list-style: none;
  display:inline-block;
}

.nav ul li a {
  margin: 0px 10px;
}

hungerstar : 让 div 标签垂直居中：

.nav {
  height: 70px;
  width: 100%;
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #aed003;
}

【讨论】：