Ask any question about CSS here... and get an instant response.
How do I center an item vertically and horizontally in a grid container?
Asked on Oct 29, 2025
Answer
To center an item both vertically and horizontally in a CSS Grid container, you can use the properties `align-items` and `justify-items` set to "center". This ensures the grid items are centered within their grid area.
<!-- BEGIN COPY / PASTE -->
<div class="grid-container">
<div class="grid-item">Centered Item</div>
</div>
<style>
.grid-container {
display: grid;
height: 200px; /* Example height */
width: 200px; /* Example width */
align-items: center;
justify-items: center;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `display: grid;` property is required to enable grid layout.
- `align-items: center;` centers items vertically within the grid container.
- `justify-items: center;` centers items horizontally within the grid container.
- Ensure the grid container has a defined height and width for centering to be visible.
Recommended Links:
