Register Login

Center Align CSS Button

14 Dec 2019 10:37 am || 0

This tutorial explains how to center the CSS button.

CSS Center Button

The main aim of CSS (Cascading Style Sheets) is to provide the best style for an HTML web page. Using CSS you can specify the arrangement of all the elements of the page. You can align elements both horizontally and vertically. A CSS button needs to be centre aligned if you want it to be centrally positioned within a div or at the centre of the web page.

You can Center Align CSS Button using the following method:

  • text-align: center - By setting the text-align property of parent div tag to the center
  • margin: auto - By setting margin property to auto
  • position: fixed - By setting position property to fixed
  • display: flex - By setting the display property to flex
  • display: grid - By setting the display property to the grid

By placing a text-align property of body tag to the center (text-align: center)

In this example, we are using `text-align` center property on the <body> tag, so everything inside the <body> tag will be center-aligned automatically.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Center align button</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <button>Hover Me!</button>
</body>
</html>

Output

By placing a text-align property of body tag to the center

By setting text-align property of parent div tag to the center (text-align: center)

In this example below, we are using `text-align` center property on <div> tag with a class ( button-container-div ) so everything inside this <div> will be center-aligned automatically.

<!-- Display Button in the centre within div (only horizontally) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Center align button</title>
    <style>
        .button-container-div {
            text-align: center;
            border: 1px solid coral;
            height: 40vh;
            width: 50vw;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Hover Me!</button>
    </div>
</body>
</html>

Output

By setting text-align property of parent div tag to the center

By setting the display property to the grid (display: grid)

In this example, we are using `display` grid property on the <div> tag with class ( button-container-div ). The button inside <div> will take place in the center of vertical and horizontal positions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Center align button</title>
    <style>
        .button-container-div {
            width: 300px;
            height: 300px;
            border: 1px solid #ff8899;
            display: grid;
        }
        button {
            background-color: crimson;
            color: #fff;
            border: 1px solid;
            padding: 10px;
            width: 100px;
            outline: none;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Hover Me!</button>
    </div>
</body>
</html>

Output

By setting the display property to the grid

By setting display property to flex (display: flex)

In this example we are using `display` flex property, `justify-content` and `align-items` to the parent <div> tag with class (button-container-div). The button inside <div> will take place in the center of vertical and horizontal position.

  • Display flex will move it to the center vertically.
  • Justify-content will move the button to the center horizontally.
  • Align-items center keeps it in the center; otherwise, it will start from the div and go at the bottom of the div.
<!-- Display Button in the centre within a div with flex (Both Horizontally and Vertically)-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Center align button</title>
    <style>
        .button-container-div {
            width: 300px;
            height: 300px;
            border: 1px solid #ff8899;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Hover Me!</button>
    </div>
</body>
</html>

Output

By setting display property to flex

Center CSS Button by using margin auto (margin: auto)

In this example, we are using the `margin` auto property. Margin auto moves the div to the center of the screen.

<!-- Display button in the center of the screen -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Center align button</title>
    <style>
        .button-container-div {
            width: 300px;
            height: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Hover Me!</button>
    </div>
</body>
</html>

Center CSS Button using Position fixed

In this example, we are giving a 50% margin from the left side of the page, and then we are taking the position: fixed so it will adjust the position on the center of the body.

<!-- Display button in the center of the screen  using position fixed -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Center align button</title>
    <style>
        button {
           position: fixed;
           left: 50%;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Hover Me!</button>
    </div>
</body>
</html>