网格垂直居中文本CSS

Question

我正在尝试创建一个具有四个不同象限的网格。在每个象限中，我希望将文本垂直和水平居中。我将文本水平放置，但不垂直放置。这是我部分网格的图片。

这是构成网格的CSS：

.gridcontainer {
    display: inline-grid;
    grid-template-columns: auto auto;
    height: 100%;
    grid-template-rows: 100% 100%;
}

这是我的网格内容之一在CSS中的样子：

.logantitle {
    font-family: "angleultra";
    opacity: 0%;
    text-align: center;

}

.loganintro {
    font-family: "montserrat-regular";
    opacity: 0%;
    text-align: center;
}

任何帮助都会很棒！预先感谢！

Answer 1

该网站对于居中非常有帮助，我填写了我认为是你拥有的东西

http://howtocenterincss.com/#contentType=div&content.width=100pct&content.height=100pct&container.width=100pct&container.height=100pct&horizontal=center&vertical=middle&browser.IE=none

<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
    <div style="width:100%;height:100%;"></div>
</div>

Answer 2

这是在现代浏览器中使文本居中的方法。如果您希望min-height: 100vh跨整个页面，则使用它。

.center {
  margin: 0;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: rebeccapurple;
  color: white;
}

<div class="center">
  hello world
</div>