Home >CSS >CSS reference – properties, selectors, functions >place-self

place-self

place-self: <align-self> [<justify-self>]

A shorthand that sets align-self (vertical alignment) and justify-self (horizontal) for one item at once. place-self: center centers the item in its grid cell.

Values

one value – the same for both directions.
two values – first vertically, then horizontally: place-self: end start = bottom left.
Values: auto (the default – by the place-items of the container), normal, stretch, start, end, center…

Initial value: auto. Inherited: no. Applies to: grid and flexbox items (in flexbox only the vertical part), absolutely positioned elements.

Examples

Three items in tall cells – each aligned somewhere else:

<div class="grid">
  <div class="a">start</div>
  <div class="b">center</div>
  <div class="c">end start</div>
</div>

.grid {
  display: grid;
  gap: 6px;
  max-width: 320px;
  padding: 6px;
  border: 2px dashed #999;
}
.grid > div {
  padding: 6px 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
}
.a { place-self: start; }
.b { place-self: center; }
.c { place-self: end start; }

result

start

center

end start

Things to watch out for

The order: the first is the vertical direction (align), the second the horizontal one (justify).
In flexbox only align-self applies; horizontal alignment of one item is done there by margin-left: auto.
An aligned item (a value other than stretch) stops filling the cell and is as large as its content.

Browser support

Baseline – widely available: in all major browsers since January 2020, considered widely available since July 2022. Since version: Chrome 59, Firefox 45, Safari 11. As of October 2026 (MDN browser-compat-data).