On Mozilla this pen works. But when I switch to Chrome it breaks.
It's just me or something is wrong with browsers?
.container {
height: 500px;
width: 500px;
background-color: beige;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
.container h2 {
position: absolute;
justify-self: center;
align-self: center;
grid-row: 1;
grid-column: 1;
}<div class="container">
<h2>TEXT</h2>
</div>codepen LINK
It appears that Chrome has deviated from spec guidance on this issue.
The justify-self and align-self properties should work on an absolutely-positioned child element of a grid container.
9.2. With a Grid Container as Parent
An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.
The static position of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the padding edges of the grid container.
Note that this position is affected by the values of
justify-selfandalign-selfon the child.
So, Firefox seems to have this right.
For other centering options see this post:
position: absolute is throwing off Chrome (tested on v62). It seems Firefox interprets the justify-self and align-self attributes as overrides, while Chrome doesn't, hence the different behavior.
Just remove position: absolute and it works.
https://codepen.io/anon/pen/vJRmNR
