How to Centre a Button with Flexbox?

Last Updated : 29 Jul, 2024

Flexbox can be used to align HTML elements with ease, making it a powerful tool for responsive design. By utilizing Flexbox properties, you can centre a button both horizontally and vertically within its container, or adjust its alignment to achieve specific layouts.

These are the following ways to centre a button:

Table of Content

Center Button Horizontally and Vertically in the Parent Container
Center Button Horizontally in the Parent Container and Vertically Align at the Bottom

Center Button Horizontally and Vertically in the Parent Container

In this approach, we are using Flexbox to center the button both horizontally and vertically within its parent container. The body element is set as a flex container to center the .container div in the viewport. The .container itself is a flex container with its content (the button) centered using justify-content: center and align-items: center.

Example: The below example Center Button Horizontally and Vertically in the Parent Container.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        h1 {
            color: green;
            text-align: center;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            width: 300px;
            border: 2px solid #ddd;
            background-color: white;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div class="container">
        <button>Click Me</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-07-27-at-22-12-04-Flexbox-Centering---Approach-1 — Output

Center Button Horizontally in the Parent Container and Vertically Align at the Bottom

In this approach, we are using Flexbox to center the button horizontally within its parent container and align it at the bottom vertically. The body is set up as a flex container to center the .container div in the viewport. Inside .container, the flex-direction: column property stacks its children vertically, while justify-content: flex-end pushes the button to the bottom, and align-items: center centers it horizontally.

Example: The below example Center Button Horizontally in the Parent Container and Vertically Align at the Bottom.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 2</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        h1 {
            color: green;
            text-align: center;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 300px;
            width: 300px;
            border: 2px solid #ddd;
            background-color: white;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div class="container">
        <button>Click Me</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-07-27-at-22-14-22-Flexbox-Centering---Approach-2 — Output

How to Create a Flexbox Grid?

gpancomputer

Improve

Article Tags :

How to Centre a Button with Flexbox?

Center Button Horizontally and Vertically in the Parent Container

Center Button Horizontally in the Parent Container and Vertically Align at the Bottom

Similar Reads

Thank You!

What kind of Experience do you want to share?