index.md

---

title: How to center an item
slug: Learn/CSS/Howto/Center_an_item

---

{{LearnSidebar}}

In this guide you can find out how to center an item inside another element, both horizontally and vertically.

Center a box

To center one box inside another using CSS you will need to use CSS box alignment properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a flex or grid container to turn on the ability to use alignment.

In the example below we have given the parent container display: flex; then set {{cssxref("justify-content")}} to center to align it horizontally, and {{cssxref("align-items")}} to center to align it vertically.

{{EmbedGHLiveSample("css-examples/howto/center.html", '100%', 700)}}

Note: You can use this technique to do any kind of alignment of one or more elements inside another. In the example above you can try changing the values to any valid values for {{cssxref("justify-content")}} and {{cssxref("align-items")}}.

See also

• Box alignment in Flexbox

• Box alignment in Grid layout