Centering absolutely positioned element in CSS Grid

Question

On Mozilla this pen works. But when I switch to Chrome it breaks.

It\'s just me or something is wrong with browsers?

相关标签:

Answer 1

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

Answer 2

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-self and align-self on the child.

So, Firefox seems to have this right.

For other centering options see this post:

• Centering in CSS Grid