居中堆叠绝对元素 + 居中弹性列垂直到 window 高度

Question

我正在尝试编写培训网站的代码，但有 2 个问题我不知道如何解决。

第一个：左侧的那 3 个按钮 (.side-buttons) 应该位于 window 高度的中间（垂直）。

第二：有一个 .headline div 包含一个 .svg 元素和一个标题，该标题应该堆叠起来并位于该 .svg 元素的中间。我考虑过制作 .svg 元素 position: relative; 并给标题 position: absolute;，但我不知道如何在未定义高度时将其居中。我该怎么做呢？或者有更简单的方法吗？

现在的样子（不要看字体大小，我稍后会更正）

它应该是什么样子：

body, html {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  box-sizing: border-box;
}
.welcome-screen {
  background-color: Lightblue;
  background-size: cover;
  height: 90vh;
  margin: 3.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.side-buttons {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-buttons img {
  height: 2em;
  padding: 0.5em 0 0.5em 0.5em;
  display: block;
}
.side-buttons a {
  text-decoration: none;
}
.headline {
  display: block;
  width: 100%;
}
.headline img {
  width: 50%;
  position: relative;
}
.headline h1 {
  position: absolute;
  z-index: 99;
}
nav {
  text-align: center;

}
nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
.headline {
  text-align: center;
}

.intro-section {
  height: 300px;
  background-color: grey;
}

<body>
<!-- header section -->
  <!-- side buttons -->
  <div class="side-buttons">
    <a href="http://pinterest.com/">
      <img src="http://placehold.it/40x40" alt="pinterest icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placehold.it/40x40" alt="facebook icon">
    </a>
    <a href="http://twitter.com/">
      <img src="http://placehold.it/40x40" alt="twitter icon">
    </a>
  </div>
  <!-- end of side buttons -->
  
<section class="welcome-screen">
  <div class="headline">
    <h1>The time is</h1>
    <img src="css/assets/now.svg" alt="now">
  </div>

  <nav>
    <a href="">intro</a>
    <a href="">gallery</a>
    <a href="">services</a>
    <a href="">contact</a>
  </nav>
</section>
<!-- end of header section -->

<section class="intro-section">

</section>

</body>

Answer 1

将 img 中的 position 更改为 h1

.headline img {
  width: 50%;
  position: absolute;
}
.headline h1 {
  position: relative;
  z-index: 99;
}

Answer 2

将body设置为display: flex;，并将.welcome-screen设置为flex-grow: 1;，左侧的图标将垂直居中。然后在 body 上设置 flex-wrap: wrap;，在 .intro-section 上设置 width: 100%;，以便该部分显示在 .welcome-screen 下方。然后将 position: relative 添加到 .headline 并将 top: 50%; left: 50%; transform: translate(-50%,-50%); 添加到您的 h1 并且它将在 svg 上居中。

body, html {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap;
}
.welcome-screen {
  background-color: Lightblue;
  background-size: cover;
  height: 90vh;
  margin: 3.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.side-buttons {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-buttons img {
  height: 2em;
  padding: 0.5em 0 0.5em 0.5em;
  display: block;
}
.side-buttons a {
  text-decoration: none;
}
.headline {
  display: block;
  width: 100%;
  position: relative;
}
.headline img {
  width: 50%;
  position: relative;
}
.headline h1 {
  z-index: 99;
  margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
nav {
  text-align: center;

}
nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
.headline {
  text-align: center;
}

.intro-section {
  height: 300px;
  background-color: grey;
  width: 100%;
}

<body>
<!-- header section -->
  <!-- side buttons -->
  <div class="side-buttons">
    <a href="http://pinterest.com/">
      <img src="http://placehold.it/40x40" alt="pinterest icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placehold.it/40x40" alt="facebook icon">
    </a>
    <a href="http://twitter.com/">
      <img src="http://placehold.it/40x40" alt="twitter icon">
    </a>
  </div>
  <!-- end of side buttons -->
  
<section class="welcome-screen">
  <div class="headline">
    <h1>The time is</h1>
    <img src="css/assets/now.svg" alt="now">
  </div>

  <nav>
    <a href="">intro</a>
    <a href="">gallery</a>
    <a href="">services</a>
    <a href="">contact</a>
  </nav>
</section>
<!-- end of header section -->

<section class="intro-section">

</section>

</body>

居中堆叠绝对元素 + 居中弹性列垂直到 window 高度

Centering stacked up absolute element + centering flex column vertically to window height

html

css

svg

absolute

flexbox