Question

我有一个简单的网页，其中包含.topnav栏和.container，其中包含一些元素。我试图将.container而不是.topnav放在页面的body内，以使其垂直居中。但是，当我尝试使用：{/ p>设置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>

以下是它现在的样子：

Answer 1

您好要在页面中间垂直对齐，请将容器的高度设置为视口的100％：

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

Answer 2

我想我知道你在寻找什么：
标题位于页面顶部和正文下方，正文内容垂直居中。

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

第一个将<body>设置为包含两个项目的垂直弹性容器：.topnav和.container。这些项目在justify-content: flex-start的Flex容器的开头是合理的（这是默认值），并允许.container增长以使用flex-grow:1填充Flex容器。

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

如果您添加了另一个.row，它可能如下所示：

只居中div中两个元素中的一个？

2 个答案: