CSS Flex-box to Center the Element Horizontally

You can use Flexbox to center the element horizontally. It is considered to be the modern approach, among others. You can use CSS properties like display: flex to center the element.

What is Flexbox in CSS?

Flexbox is the short name for Flexible Box Layout in CSS, where you can create a flexible and responsive layout. You can use it to align, distribute, and adjust elements within a container. The spacing and alignment can be controlled using display: flex, justify-content, and align-items properties.

How do you use Flexbox to center an element horizontally?

The display: flex property can be used for horizontally centering an element. You can set the parent elements to display: flex so that you can make the container a flex container. And use justify-content: center to center the child element horizontally without using CSS properties such as position: absolute or margin: auto.

Example 1: Centering the Div Using Flex-box

Flex-box is short for flexible box, which provides a one-dimensional system and is perfect for aligning items in rows or columns. Here, we are using the flex-box to center the element horizontally.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <style>
    .box {
      display: flex;
      justify-content: center; 
      align-items: center; 
      height: 100vh; 
      background-color: whitesmoke;
    }

    .center {
      background-color: lightcoral;
      padding: 25px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
     Intellipaat!
    </div>
  </div>
</body>
</html>

Output:

Explanation: In this code, the element is horizontally centered using the flexbox layout. In this layout, the .container class is used to center the div element. The .centered class styles the inner content with CSS properties.

Learn Web Development and Launch Your Tech Career

Professional Web Development Courses

Explore Program

Example 2: Centering a Button Using Flexbox

The container is set to use Flexbox, with properties like justify-content for horizontally centering the button.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button</title>
  <style>
    .box {
      display: flex;
      justify-content: center; 
      align-items: center; 
      height: 100vh; 
      background-color: white;
    }

    .center {
      padding: 10px 25px;
      font-size: 20px;
      background-color: palevioletred;
      color: black;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
    .center:hover {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <button class="center">
      Click Me
    </button>
  </div>
</body>
</html>

Output:

Explanation: You can use this code to center the elements. The properties, such as justify-content: center and align-items: center, are used for centering the button. Followed by adding some other properties for styling them.

Example 3: Centering Image using Flexbox

You can set the container to display: flex and use properties like justify-content: center for horizontal alignment of the image.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Image</title>
  <style>
    .box {
      display: flex;
      justify-content: center; 
      align-items: center; 
      height: 100vh;
      background-color: whitesmoke;
    }
    .center img {
      max-width: 100%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJ8ywXldA6p59oZhY3BoPmE7O9DSSCeg8hLQ&s" alt="Centered Image">
    </div>
  </div>
</body>
</html>

Output:

Explanation: The images get centered using this code. The container is set to display: flex, justify-content: center, and align-items: center for horizontal centering. The shadow effect is also applied to the image at last.

Conclusion

CSS Flexbox is the best way to center the elements. The parent container is set to display: flex, and the elements such as div, image, and button are centered using justify-content: center. We can also observe that the other positioning elements are not used. So that you can get a well-structured webpage with centered elements.