如何使用视口单位将 div 中的文本居中？

Question

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

#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

要使 vertical-align:middle 起作用，必须将父级设置为 display:table-cell HTML

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

CSS

#aboutMeTitle {
height: 10vh;
background-color: #BEA69B;
display:block;
display:table-cell;
}

#aboutMeTitle p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
text-transform: uppercase;
letter-spacing: 0.2em;
vertical-align:middle;
text-align:center;
}

Answer 2

使用 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. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in .

Answer 3

您刚刚在 #aboutMeTitle p 中删除了 display: inline-block，并添加了 line-height: 10vh; 以使文本垂直居中。

HTML代码：

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

CSS代码：

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

JSFIDDLE DEMO

Answer 4

我觉得我真的很愚蠢，我为打扰任何人而道歉。希望这个答案可以帮助其他人。我在 4 个小时的睡眠中工作了两倍，现在我正在做一个个人项目。无论如何，您可以应用带有视口单位的行高属性，我只需要对其进行硬编码，因为它不是 DW CSS 面板中的选项。

这里是固定的CSS

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

如何使用视口单位将 div 中的文本居中？

How can I center text in a div with viewport units?

html

css

viewport

responsive-design