How to center button css

Center Align CSS Button

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:

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 tag, so everything inside the tag will be center-aligned automatically.

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

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.

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.

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

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

In this example, we are using `display` grid property on the

How to center a button with HTML & CSS

How can you center a block or inline-block button element using CSS and HTML?

This can be a bit tricky, but here are some quick tips on how to center your button, no matter which type of element it is.

Inline-block button element

This means that if you have two inline-block elements one after the other, they will display side by side if there is enough horizontal space.

This is similar to elements with display: inline set, except you can control the height and width of inline-block elements, and not inline elements.

Centering using text-align: center

You can center inline-block (and inline) elements by setting text-align: center on a parent element.

Let’s see how this works in the code. Here’s is our HTML markup:

We have wrapped our element in a

Block button element w/ static width

Block elements can’t be centered with text-align: center because they will by default be full-width unless given a static width.

Sometimes you might need to set a static width on a button, so if you do, you can use this technique to center the button on the page.

Let’s say we have a button that we have set to 200px wide. Even though it’s only 200px, it won’t let any other elements be next to it.

Let’s see how this looks in the code:

And the button will look like this on the page:

Centering using flexbox

Alternatively, you can center both inline-block and block elements using flexbox.

Wrap the button in a parent

Here’s the code for that:

Two buttons side by side

Sometimes you might want to have two buttons next to each other, but to center both together on the page.

You can achieve this by wrapping both buttons in a parent

Here’s the code for that example:

Notice that we also added margin-right: 20px to the first button, in order to add space between them.

Here’s what the buttons will look like on the page!

You can see all the actual code in a Codepen here.

I’m making a course that will teach you how to build a real-world responsive website from scratch!

Sign up to get emails about new posts and other info. Unsubscribe anytime.

Affiliate Disclaimer

I participate in various affiliate programs and my content contains affiliate links. If you purchase through those links, I may receive a commission from the seller, at no cost to yourself. It’s one way you can support this site!

As an Amazon Associate I earn from qualifying purchases. I only recommend products that I personally know and believe are helpful to my readers.

How to center a button element using CSS

Last Updated Jul 07, 2022

Let’s look at how you can center a button horizontally and vertically using CSS Photo from Unsplash

To center an HTML element, you need to add certain CSS properties that will put the button at the center of your HTML web page.

Button center horizontally with text-align

The text-align property is used to specify the horizontal alignment of text in a block element.

One trick of this property is that it can also be used to set the alignment of children elements in a parent

For example, suppose you have a

The output will be as shown below:

Button center horizontally using margin auto

Alternatively, you can also set the button in the middle of the tag.

Set the display property to block and add margin: 0 auto to the tag as shown below:

Here’s the result:

This is useful when your button has no parent element.

How to center button horizontally and vertically

Suppose you have a

Use css class to make your code tidy as follows:

Also add the display property here so that you can center vertically without the center-h class.

To see the content centered vertically, let’s add one more class to set the

Finally, add all the classes assigned to the CSS rule above to the containing

The output will be as shown below:

To center the button vertically but not horizontally, remove the center-h class:

Now you’ve learned how to center a

And that’s how you can center a button using CSS!

CSS is very useful for styling your web page elements, but it’s quite tricky to learn what rule to write and what property to use.

The guides I’ve written will help you to become better with CSS.

Thanks for reading! 😉

Level up your programming skills

I’m sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I’ll send new stuff straight into your inbox!

About

Nathan Sebhastian is a software engineer with a passion for writing tech tutorials.
Learn JavaScript and other web development technology concepts through easy-to-understand explanations written in plain English.

How to Center a Button in CSS and HTML

Making the button center can sometimes be tricky as there are numerous ways to achieve it using CSS. Here are the 3 options that you can use right now to center the button.

How to use margin: auto to center the button

The first and perhaps the simplest option is adding margin: 0 auto and then add display: block to make the button center.

The margin: 0 auto is a short form of setting the top and bottom margins to 0 and the left and right margins to auto. The margin auto is what causes the button to be centered, and a display block is needed as it will work only in block elements.

How to center a button using a div element tag

The second option is to wrap the button with the div element tag and then use text-align: center to center the button. It’s like you’re making a text to be centered.

The downside of this approach is every time you want to center a button, you will have to create a new div element just for this button. And if you have a lot of buttons that need frequent styling updates, it’ll quickly become a hassle to maintain it. In that case, you are better off using option one.

In short, if you insist on using this approach, do it for few buttons only.

How to center a button using CSS flexbox

The third option is to use a flexbox to center a button. This approach is ideal if you are already using flexbox on a web page and the button is inside the parent element.

To center a button with a flexbox, you should do 2 things:

In the example below, div is the parent element of the button.

And there you have it! These are the 3 ways you can use to center a button in CSS.

How to center a button element vertically and horizontally with CSS?

The buttons can be aligned center horizontally or vertically using CSS. In this tutorial, we will learn about the properties to align the button vertically and horizontally.

Using flex properties

The flexbox properties can be used to align the button horizontally and vertically center. We can horizontally center the button element using the CSS align-items property along with the value center. While we can vertically center the button element using the CSS property justify-content along with the value center.

Example: Center align button vertically and horizontally

In this program, we have used flexbox properties to center align buttons both vertically and horizontally.

Output

Here is the output of the above program.

Using CSS transform property

Other than flexbox property, we can also center align the button horizontally and vertically using a set of CSS properties. Add position: relative to the container class and position: absolute to the class containing the button. Now use left:50% and top:50% to position the button to the center of the container. along with it use transform: translate(-50%,-50%).

Example: Center the button horizontally and vertically

In this program, we have used the above properties to center the button horizontally and vertically.

Conclusion

In this tutorial, we have learned the ways to center the button horizontally and vertically using CSS. We can use flexbox property or position property to do so. It has been explained with examples.