What are the ways to center an element on both axes?

/* 1. Grid - shortest */
.parent { display: grid; place-items: center; }

/* 2. Flex */
.parent { display: flex; align-items: center; justify-content: center; }

/* 3. Absolute + transform (when the child is out of flow) */
.parent { position: relative; }
.child  { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }

/* 4. Horizontal only, for a block with a width */
.child { margin-inline: auto; }