Question

我想将“主要”内容垂直居中在页面中间，但无论我做什么我都不知道为什么它不起作用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
  body {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img link) background-size: cover;
    background-position: center;
  }
  
  .brandFont {
    font-family: 'Staatliches', cursive;
    font-size: 2rem;
  }
</style>

<body class='text-center text-white'>
  <div class='w-100'>
    <nav class='navbar navbar-dark bg-dark'>
      <span class="brandFont navbar-brand mb-0 h1">TEXT HERE</span>
    </nav>
    <main class='container'>
      <h1>
        TEXT HERE
      </h1>
      <h2>
        LONGER TEXT HERE
      </h2>
    </main>
  </div>

</body>

我也尝试过使用 flexbox，但似乎文本不想移动太多

Answer 1

<块引用>

我也尝试过使用 flexbox

是的，您可以使用以下方法在 CSS Flexbox 中实现垂直居中：

flex-direction: column
justify-content: center

工作示例：

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<main class='container'>
  <h1>TEXT HERE</h1>
  <h2>LONGER TEXT HERE</h2>
</main>

Answer 2

对 HTML 进行了一些更改：https://codepen.io/emmeiWhite/pen/PoGeJze

完整的工作代码：

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.hero-wrapper{
      min-height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)), url(https://picsum.photos/id/1/367/267) center top;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container{
  color:#fff;
  text-align:center;
}

.navbar{
  position:absolute;
  left:0;
  top:0;
  right:0;
  background:yellow;
  padding:0.5rem;
  opacity:0.5;
  color:red;
}

<body class='text-center text-white'>
<div class='hero-wrapper'>
    <nav class='navbar navbar-dark bg-dark'>
        <span class="brandFont navbar-brand mb-0 h1">TEXT HERE</span>
    </nav>
    <main class='container'>
      <div>
        <h1>
            TEXT HERE
        </h1>
        <h2>
            LONGER TEXT HERE
        </h2>
        <p>People of this world are travellers</p>
      </div>
    </main>
</div>

想要将内容垂直居中

2 个答案: