How to align a button in the center of the div

Key takeaways:

  • Key methods to center buttons include:

    • text-align: center: Centers inline elements within a parent div.

    • margin: auto: Centers block-level elements with a defined width.

    • CSS grid: Simplifies layout management using rows and columns for easy button alignment.

    • CSS flexbox: Provides flexible options for positioning elements within a container.

Do you find it difficult to have a centered input button within a div tag using HTML and CSS? Don’t fret! You’re not alone. Many beginners struggle when their buttons just won’t align as intended. In this Answer, we will discuss techniques to center a button using simple CSS techniques.

CSS techniques to center the input button

There are multiple CSS techniques to center the button of the div, including:

“Everything is designed. Few things are designed well.” — Brian Reed

Proper alignment is one of the key elements of good design, such as centered buttons helping to provide a more user-friendly and visually appealing experience.

Method 1: Use the text-align: center property to align the button in the center

The text-align: center property in CSS is used to center inline elements (e.g., text and buttons). We can use it by wrapping the button in a <div> and applying the text-align: center style to that div.

Method 2: Use the margin: auto property to align the button in the center

The margin: auto property can be used to center elements horizontally. To align a button in the center, set the button to display as a block and then, apply margin: auto to center it.

Method 3: Use CSS grids to align the button in the center

CSS Grid is one of CSS’s layout tools, which lets us easily implement a complex design layout using the row and column approach. The following code example demonstrates how to use CSS grids with other CSS properties to align a button in the center.

Method 4: Use the CSS flexbox to align the button in the center

CSS flexbox provides powerful alignment options by giving the user control over properties like alignment, order, and direction. The following code example demonstrates how to use CSS flexbox with other CSS properties to align a button in the center.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do we align a button in the center of a div in Bootstrap?

We can align a button to the right of a div element using d-flex and justify-content-center classes:

<div class="d-flex justify-content-center">
  <button class="btn btn-success">Success</button>
</div>

How do we align a button to the right of a div?

We can align a button to the right, in CSS, by setting the text-align property to right.

<div style="text-align: right;">
  <button"> Enter </button>
</div>

How do we align a button to left in CSS?

We can align a button to the left, in CSS, by setting the text-align property to left.

<div style="text-align: left;">
  <button"> Enter </button>
</div>

How do we horizontally center a button in CSS?

We can horizontally center a button in CSS by applying display: block and margin: auto properties to the button element.

Can we align buttons differently on mobile vs. desktop?

Yes, we can align buttons on different sizes of UI using CSS media queries to adjust button alignment.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved