How to align items to the center using Flexbox

Aligning items to the center using Flexbox serves as an effective technique to enhance the layout and presentation of web content. In the following illustration, the text "Center align" is center-aligned with the educative logo.

The item can represent any element we aim to align using Flexbox. In this Answer, we will align three items with Flexbox including buttons, text blocks, and images.

Align a button

Use the following steps to center align a button in a div container.

  1. Create a div with the class flex-container.
  2. Insert the button tag within a div.
  3. In the CSS for the div, set justify-content to center.
  4. Set align-items to center.
  5. Set display to flex.

The button and all the contents within the div should now be center-aligned.

Below is a working code example that can help you better understand the concept:

Align a text

To align a text, we can use the following steps to center align a text.

  1. Create a div with the class flex-container.
  2. Insert the p tag within a div. You can use any other relevant tag for text.
  3. In the CSS for the div, set justify-content to center.
  4. Set align-items to center.
  5. Set display to flex.

Below is a working code example that can help you better understand the concept:

Align an image

We can follow the same steps as for text and button to center-align the image. We need to use the <img> tag within a div to display the image.

In summary, learning how to align items to the center using Flexbox is a great way for beginners to make their web designs look better. Flexbox helps you easily center elements like text, images, and buttons on your webpage, making it more visually appealing

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved