Horje
How to Centre a Button with Flexbox?

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

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


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Disable Text Selection in HTML with CSS? How to Disable Text Selection in HTML with CSS?
How to Disable Flex in CSS? How to Disable Flex in CSS?
How to Build Animated Cursor Neon using HTML, CSS and JavaScript? How to Build Animated Cursor Neon using HTML, CSS and JavaScript?
How To Use Inline Styles in ReactJS? How To Use Inline Styles in ReactJS?
CSS Navigation Bar CSS Navigation Bar

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 24



 

Horje