仅将div中的两个元素之一居中？ [复制]答案

【问题标题】：Center only one of two elements in a div? [duplicate]仅将div中的两个元素之一居中？ [复制]
【发布时间】：2023-12-08 13:01:01
【问题描述】：

我有一个简单的网页，其中包含一个 .topnav 栏和一个 .container，其中包含一些元素。我试图在页面的body 内仅将.container 居中，而不是.topnav，以便它垂直居中。但是，当我尝试使用以下方式设置 body 样式时：

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

.topbar 和 .container 都居中。如何将 .container 垂直居中？

body,
html {
  height: 100%;
}

.contact_box {
  text-align: center;
  background-color: red;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  height: 20em;
  width: 25em;
  box-shadow: 1px 1px 6px #757677;
  float: left;
}

.contact_box img {
  margin-top: 3.3em;
  margin-bottom: 1.2em;
  height: 3em;
  width: 3em;
}

.contact_box h3 {
  color: #6d6d6d;
}

#contact .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<body id="contact">
  <div class="topnav" id="myTopnav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="#" class="selected">Contact</a>
    <a class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div class="container">
    <div class="row" id="contact_section">
      <div class="contact_box" class="col-md-4">
        <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a>
        <br>
        <h3>GitHub</h3>
      </div>

      <div class="contact_box" class="col-md-4">
        <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a>
        <h3>LinkedIn</h3>
      </div>

      <div class="contact_box" class="col-md-4">
        <img src="resources/email_icon.png" alt="EMAIL">
        <h3>Email</h3>
      </div>
    </div>
  </div>
</body>

现在是这样的：

【问题讨论】：

由于您不希望 flexbox 行为出现在导航栏上，最简单的解决方案可能是不将导航栏放在 flexbox 中。
导航栏看起来不像在弹性框中。只有.container 设置为display:flex。我很困惑。
啊，你是对的@showdev。我也很困惑——Nezdiro，你能澄清一下你在问什么吗？您在此处发布的代码 sn-p 与您对问题所在的描述不符...
@DanielBeck 它似乎没有在代码 sn-p 结果中显示，因为页面不大于元素，但在我的网页上，contact_section 直接显示在导航栏，不在页面上垂直居中。我将发布一个可能有助于澄清的屏幕截图。

标签： html css flexbox centering

【解决方案1】：

Hi 在页面中间垂直对齐，设置容器高度为视口的 100%：

#contact .container {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

【讨论】：

我喜欢这个答案！唯一的问题是现在整个主体大于视口的高度，所以当我向下滚动到导航栏下方时，这些框只会看起来居中。导航栏的高度是 68px，我尝试将 .container 的顶部设置为 -68px，但这似乎没有任何影响。

【解决方案2】：

我想我明白了你在寻找什么：
页面顶部的标题和下方的正文，正文内容垂直居中。

下面的示例中有三个弹性系统：

第一个将<body> 设置为具有两个项目的垂直弹性容器：.topnav 和.container。这些项目以justify-content: flex-start 对齐到弹性容器的开头（无论如何这是默认值），并且允许.container 增长以用flex-grow:1 填充弹性容器。

第二个将.container 设置为垂直伸缩容器，每个.row 作为一个项目。项目分别以justify-content: center 和align-items: center 垂直和水平居中。

第三个将.row 元素设置为水平弹性容器（flex-direction: row 是默认值），每个.contact_box 作为一个项目。项目以justify-content: center 水平居中。

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.contact_box {
  background-color: red;
  border: 1px solid #c0c0c0;
  border-radius: .5em;
  box-shadow: 1px 1px 6px #757677;
  padding: 1em 2em;
  text-align: center;
}

.contact_box h3 {
  margin: .25em 0 0;
}

<div class="topnav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#" class="selected">Contact</a>
  <a class="icon">&#9776;</a>
</div>

<div class="container">

  <div class="row">

    <div class="contact_box">
      <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a>
      <br>
      <h3>GitHub</h3>
    </div>

    <div class="contact_box">
      <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a>
      <h3>LinkedIn</h3>
    </div>

    <div class="contact_box">
      <img src="resources/email_icon.png" alt="EMAIL">
      <h3>Email</h3>
    </div>

  </div>

</div>

像这样，每个 flex 系统都有不同的颜色：

如果你添加了另一个.row，它可能看起来像这样：

【讨论】：