How Do You Vertically Centre an Factor in CSS? (Even Extra) Simply!

Rachel Andrew shared a snippet of fine information for CSS structure on her weblog the opposite day: it’ll quickly be potential to vertically centre a component inside a mum or dad with out the mum or dad needing to be a flex or grid container, utilizing the align-content property.

Gone are the times when builders lamented they couldn’t heart a <div> (hopefully), as we now have a bunch of how to try this, the shortest of which solely require two properties set on the mum or dad utilizing Grid or flexbox:

.mum or dad {
  show: flex;
  align-items: heart;
}

.mum or dad {
  show: grid;
  align-items: heart;
}

You possibly can see the distinction between the 2 on this demo.

See the Pen
Middle align parts in flex and grid by Michelle Barker (@michellebarker)
on CodePen.

When the kid component is a flex merchandise the resolved width will rely upon the content material, whereas show: grid will create a grid of 1 column spanning the accessible width, with the kid component persevering with to behave equally to a block merchandise and take up the complete width of the column (except we’ve set an intrinsic width).

Utilizing Grid, align-content will work simply as properly for a single merchandise (though the impact will probably be totally different when you’ve a number of gadgets within the grid):

.mum or dad {
  show: grid;
  align-content: heart;
}

It received’t vertically centre a flex merchandise although.

As well as, we will align a component each vertically and horizontally with place-items — shorthand for justify-items and align-items:

.mum or dad {
  show: grid;
  place-items: heart;
}

It’s additionally potential to vertically align with justify-content in a flex structure if we swap the flex container to make use of the column route fairly than the row, however this requires one additional property:

.mum or dad {
  flex-direction: column;
  justify-content: heart;
}

As soon as once more, there’s a shorthand accessible to us with Grid if we need to mix justify-content and align-content:

.mum or dad {
  show: grid;
  place-content: heart;
}

Block structure

With the information Rachel shared, the mum or dad gadgets wouldn’t have to be a flex or Grid container, and may very well be any block component as an alternative. We’d solely want the align-content property on the mum or dad to centre its youngsters:

.mum or dad {
  align-content: heart;
}

I assume the ensuing behaviour could be just like utilizing align-content with Grid fairly than flexbox.

As Rachel identified, this has really been a part of the spec for a while (though I definitely wasn’t conscious of it!). It’s apparently in Chrome Canary (however not working for me on the time of writing!) and deliberate for basic launch in Chrome 122.

Testing for browser help

One factor that issues me, is that this appears to fall into that difficult space the place it turns into unattainable to check for browser help and supply fallbacks utilizing a characteristic question — very like hole when it was carried out for flexbox. As align-content is well-supported for Grid and flexbox, the characteristic question doesn’t assist us right here.

@helps (align-content: heart) {
  /* This can resolve true for any browsers supporting the property in grid or flexbox */
}

It might be nice to see some enhancements to how characteristic queries can deal with these types of conditions.