文本对齐问题

Question

我正在玩html和css，并对text-align函数有疑问。

我正在尝试构建自己的网站，并希望文本对齐集开始，但是以页面中间为中心。我已经得到它，以便内容居中，但只有text-align设置为居中。有没有办法获得居中的文本内容，但文本对齐设置为开始？我并不特别想使用填充（如果它可以帮助），因为我在这种情况下使用它并且有一些响应问题（必须使用许多媒体屏幕命令纠正）。

抱歉这个漂亮的noobie问题。

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垂直居中展示项目。

Stack Snippet

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

Answer 2

修正宽度，然后设置margin: 0 auto