html - 如何将带有视口(viewport)单位的 div 中的文本居中？

Question

当使用像素单位时，我可以毫无问题地对齐文本。但是有了视口(viewport)单位，我哪儿也去不了。这是我的代码。

#aboutMeTitle {
  height: 10vh;
  background-color: #BEA69B;
  display: block;
}
#aboutMeTitle p {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
  text-transform: uppercase;
  letter-spacing: 0.2em;
  vertical-align: middle;
  text-align: center;
}

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
</div>

Answer 1

使用 CSS flexbox 非常简单:

#aboutMeTitle {
  display: flex;
  justify-content: center;  /* center p horizontally */
  align-items: center;      /* center p vertically */
  height: 10vh;
  background-color: #BEA69B;
}
#aboutMeTitle p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
 </div>

浏览器支持: 所有主流浏览器都支持 Flexbox，except IE < 10 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .