How to vertically align objects in CSS when working with CSS grids?

Question

I have come across this problem recently. Lets suppose I have a simple <h1> tag and I want to center it vertically, so even when I re-size the window, it will remain in the middle of one of my grid box rows, neglecting its horizontal position.

I know that when it comes to grid containers, vertical-align has no effect. So what would be the solution?

This question has been marked as a duplicate, however, the other question asks about centering text horizontally, whereas, here, I'm asking about vertical centering.

You didn't provide a code example so here's relevant CSS Grid documentation about alignment: https://www.w3.org/TR/css-grid-1/#row-align (anchored § and following ones) and #1 result for "[css grid alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/#alignment-in-grid-layout)", an article from R. Andrew in Smashing Mag — FelipeAls, Aug 08 '17 at 08:34

Gesha · Answer 1 · 2017-08-08T09:21:50.920

43

There is no need for a table, why you will mix grid with table ?

You can use align-items:center to achieve vertical centering.

If the grid cell is <h1> itself, you can use align-self:center to vertical center the content into <h1>

edited Aug 08 '17 at 09:21

answered Aug 08 '17 at 09:16

Gesha

703
4
7

2

Doesn't `align-items` or `align-self` require `display: flex`? – jchook Mar 18 '18 at 13:39
Yes and what is the problem ? – Gesha Mar 22 '18 at 08:45
2

CSS grids are also flex-containers. See this guide for what properties you can use, which includes align-self and align-items: https://css-tricks.com/snippets/css/complete-guide-grid/ – Phoenix Oct 04 '20 at 18:52
2

`align-self:center` centers cell itself, not cell content. – Cluster May 14 '21 at 18:44
When using tables as grid, vertical-align does not work. Then ` display: grid; align-items: center;` is needed for `td` and `th` to vertically align. – kap Jun 03 '21 at 23:13

score 3 · Accepted Answer · edited Mar 18 '18 at 07:49

Good question - I managed to work around the issue with a wrapper, and using display: table

https://jsfiddle.net/8vjvnznk/

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 300px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  align-content: space-evenly;
}

.workaround{
  border: 1px solid green;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
  
}
h1{
  font-size: 1em;
  border: 1px solid yellow;
  display: table-cell;
  vertical-align: middle;
}

#boxc{
 background: red;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c" id="boxc">
    <div class="workaround">
      <h1>
        The heading in question!
      </h1>
    </div>
  </div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

How to vertically align objects in CSS when working with CSS grids?

2 Answers2

Linked