How to Center a Flex Item Within a Container When Surrounded by Other Flex Items?

Center Flex Item in Container When Surrounded by Other Flex Items

To center a flex item within a container, when surrounded by other flex items, consider the following:

Conventional Methods

• Using justify-content and margin: auto: When there is equal total length of flex items on both sides of the centered item, these properties can effectively align it.

Alternative Approach

• Containing and Balancing Length: Wrap the centered item in a separate flex container and ensure equal total length of the sibling flex items on either side. This forces the centered item to occupy the remaining space and align to the center.

Example Code

In the following example, the h2 is centered correctly using the alternative approach, ensuring equal total length of the span items on both sides.

HTML:

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2 id="I-m-an-h">I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div></code>

CSS:

<code class="css">.container {
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.container div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

The above is the detailed content of How to Center a Flex Item Within a Container When Surrounded by Other Flex Items?. For more information, please follow other related articles on the PHP Chinese website!