Box alignment for block, absolutely positioned, and table layouts

The justify-content property does not apply to block containers or table cells.

The align-content property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject.

The justify-self property is used to align an item inside its containing block on the inline axis.

This property does not apply to floated elements or table cells.

The align-self property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.

Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A margin of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:

.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

In table layout, you have access to the vertical-align property to align the contents of a cell inside that cell.

For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.

<div class="box">
  <div></div>
</div>

.box {
  height: 300px;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}

• justify-content
• align-content
• justify-self
• align-self

• Alignment subject
• Alignment container
• Fallback alignment