There exist many ways to center a button on a web page. Here are few easy ways you can learn and master in less time.

  • You can center align the texts in the parent container. Buttons are inline-block elements. They respond to the text alignment of the parent.
  • You can create a transformation to position a button in the middle of its container.
  • You can leverage the CSS flexbox and grid methods to center a button in a container.

The center alignment of text in parent centers a button in the horizontal direction only. The other methods center a button both in horizontal and vertical directions.

The next section will help you master these methods with a coding example.

A coding sample

Here comes an easy-to-follow example that centers buttons using the above methods.

The Source Code

Let’s create an empty HTML file, call it index.html and put the following code in it.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> A Sample Web Page </title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container container1">
         <button class="button1">Button 1</button> 
      </div>
      <div class="container container2">
         <button class="button2">Button 2</button>
      </div>
      <div class="container container3">
         <button class="button3">Button 3</button>
      </div>
      <div class="container container4">
         <button class="button4">Button 4</button>
      </div>
   </body>
</html>

The CSS file style.css should have below source code


.container {
	height: 25vh;
	border: 1px solid black;
}

.container1 {
	background-color: cadetblue;
	text-align: center;
}

.container2 {
	background-color: gold;
	position: relative;
}

.button2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.container3 {
	background-color: coral;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container4 {
	background-color: dimgray;
	display: grid;
	justify-content: center;
	align-items: center;
}

.button1 {
	display: inline-block;
}

The Explanations

Now, let me walk you through the above source code.

The HTML source code creates four div containers. Each of them has a button inside. The CSS source code makes use of different methods to center these buttons.

Being inline-block elements, buttons respond to the text alignment of the parent. For example, the CSS source code center aligns the text of the div container with class container1. Thus the inside button with class button1 appears at the center of the container.

Absolute positioning almost centers the button with class button2 within its container. But it places the start of the button at the center of the container. So the example leverages the CSS property, transform, to make the small correction. This put the center of the button on that of its container.

The example uses the CSS flexbox and grid methods to center the remaining buttons. The property justify-content centers a flexbox or grid element in horizontal order. The property align-items center a flexbox or grid item in the vertical direction.

Conclusion

Here is what you have learned so far -

  • You can use text alignment, flexbox, and grid methods on the parent element to center a button.
  • The center alignment of texts in parent centers a button exists within the container.
  • The CSS flex and grid methods are the easiest to center a button on a web page.

Now it’s your turn to practice more to gain confidence in using them in future projects.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript