Question

所以我有一个包含navbar的页面和一堆内容。代码大纲如下：

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

<div class="navbar">
<!-- Various navbar links here -->
</div>

<div class="container">
<!-- Some content here -->
</div>

我想要的是container以body为中心，但保持navbar位于顶部。

上述代码在中心对齐navbar和container。如何在container中垂直居中body并使navbar不能居中？

Answer 1

你可以这样做：

html, body {height: 100%} /* mandatory */
body {margin: 0} /* mandatory */

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar {
  position: absolute;
  top: calc(50% - 150px); /* moved down by 50% of the screen height - half of the container's height - navbar's height */
  width: 1200px;
  max-width: 100%;
  height: 50px;
  background: Khaki;
}

.container {
  width: 1200px;
  max-width: 100%;
  height: 200px;
  background: Lavender;
}

<div class="navbar">
<!-- Various navbar links here -->
</div>

<div class="container">
<!-- Some content here -->
</div>

body 元素应该成为 flex-container flex-direction: column，以便它堆叠项 < EM>垂直。由于您只想center div .container，因此您需要.navbar absolute position并将其移到正上方使用 CSS top 函数计算的calc() 属性和相应的值

Answer 2

你可以给.container一个固定的宽度：

.container {

max-width: 860px;
margin-right: auto;
margin-left: auto;
}

Answer 3

您可以将正文设为flex列容器，并使用margin .navbar和.container代替justify-content和align-items来自flex父级

所需的基本代码：

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.navbar {
  margin: 0 auto;
}

.container {
  margin: auto;
}

＆＃13;

<div class="navbar">navbar
</div>

<div class="container">
  container
</div>

＆＃13;

（min - ） width和（min - ） height可应用于您的盒子以满足您的需求。

如何在没有居中导航栏的情况下垂直居中身体元素

3 个答案: