Grid vertically centering text CSS

Question

I am trying to create a grid with four distinct quadrants. In each quadrant, I am looking to center the text vertically as well as horizontally. I have the text set horizontally but not vertically. Here is a picture of part of my grid.

Here is my CSS that makes the grid:

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

Here is what one of my grid contents looks like in CSS:

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

}

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

Any help would be great! Thanks in advance!

Kyle DePace · Accepted Answer · 2020-07-25T18:46:34.867

1

This site is pretty helpful for centering, I filled out what I believe is what you have

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>

edited Jul 25 '20 at 18:46

answered Jul 25 '20 at 18:42

Kyle DePace

125
4

It's recommended that you paste the relevant code too. Sometimes links break. – mpen Jul 25 '20 at 18:44

score 1 · Answer 2 · answered Jul 25 '20 at 18:47

Here's how you can can center text in modern browsers. Use min-height: 100vh instead if you want it to span the whole page.

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

Grid vertically centering text CSS

2 Answers2