html - 文本对齐问题

Question

我正在研究 html 和 css，对文本对齐功能有疑问。

我正在尝试构建自己的网站并希望文本对齐设置开始，但居中于页面中间。我明白了，所以内容居中，但是当只有文本对齐设置为居中时。有没有办法获得居中的文本内容，但文本对齐设置为开始？我不是特别想使用填充(如果有帮助的话)，因为我已经在这种情况下使用它并且遇到了一些响应问题(必须通过许多媒体屏幕命令来纠正)。

很抱歉这个漂亮的菜鸟问题。

HTML

.Container1 {
  height: 100%;
  width: 100%;
  background: #e8eaed;
  background-size: cover;
  display: table;
  margin: auto;
  display: table;
  top: 0;
}

.About {
  font-family: 'Lato';
  font-weight: 300;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  max-width: none;
}

.Content2 {
  margin: 0 auto;
  text-align: center;
}

.About h2 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 10px;
  font-style: italic;
  color: #70a1af;
  text-shadow: 2px 2px white;
  text-align: center;
}

.About p {
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 20px;
  color: #70a1af;
}

<section class="Container1">
  <div class="About">
    <div class="Content2">
      <h2> ABOUT ME.</h2>
      <p> Computer Science // British Born // Wannabe Australian </p>
    </div>
  </div>
</section>

这就是我希望文本对齐的方式，但要在页面中间居中......

Answer 1

尝试使用Flexbox .使用 align-item:center 使 flex 元素垂直居中。

堆栈片段

.Container1 {
  height: 400px;
  background: #e8eaed;
  display: flex;
  align-items: center;
}

.About {
  font-family: 'Lato';
  font-weight: 300;
}

.About h2 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 10px;
  font-style: italic;
  color: #70a1af;
  text-shadow: 2px 2px white;
}

.About p {
  font-size: 18px;
  letter-spacing: 4px;
  line-height: 20px;
  color: #70a1af;
}

<section class="Container1">
  <div class="About">
    <div class="Content2">
      <h2> ABOUT ME.</h2>
      <p> Computer Science // British Born // Wannabe Australian </p>
    </div>
  </div>
</section>