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 th text-align property of the 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
1. 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
2. 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
3. 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>4. 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>
4. 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 center 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
3. 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
