With CSS (Cascading Style Sheets), you can give an HTML web page the best possible look. Each and every element on a page can be arranged in any way you like using CSS. Horizontally and you can use vertically aligned items. CSS buttons must be center-aligned if they are to be placed at the center of a web page or within a div.
Before we proceed, we would like to thank komik.dk for helping us create this guide.
Use the following procedure to center align a CSS Button.
Center: Text-align – Simply by changing the text-align to center from the div tag property.
margin: auto – By selecting the auto margin option in the properties window
position: fixed – By setting the position attribute to fixed
display: flex – By changing the display attribute to flex
display: grid – You can display the grid by selecting the display attribute to the grid.
1. By centering the text-align attribute of the body tag (text-align: center)
In this example, we utilize the ‘text-align’ center attribute on the ‘body> tag, which automatically centers everything inside.
2. By centering the text-align attribute of the parent div tag (text-align: center)
In the example below, we’re using the ‘text-align’ center property on a div> element with the class (button-container-div) to ensure that anything included within this div> is automatically center-aligned.
3. Using the margin auto property, center the CSS button (Margin: auto)
We’re utilizing the auto property ‘ Margin.’ Margin automatically centers the div on the screen.
4. Utilize a fixed-position CSS button to center it.
In this example, we’re setting a 50% margin from the left side of the page and then using position: fixed to center the body.
5. By specifying the flex property for the display property (display: flex)
In this example, we’re applying the flex property ‘display,’ as well as the properties ‘justify-content’ and ‘align-items,’ to the parent div> tag with class (button-container-div). The button contained within the div> will be centered in both the vertical and horizontal axes.
Justify-content centers the button horizontally.
The Align-items center keeps it in the middle; otherwise, it will begin at the top of the div and work its way down.
How to horizontally center a Button in CSS
It can be a little tough, but here are some fast techniques for centering your button, regardless of the element type.
Align Elements in the Center
To center a block element horizontally (such as div>), use margin: auto;
Setting the element’s width prevents it from expanding beyond the boundaries of its container.
The element will then fill the required width, leaving an equal amount of space between the two margins:
This div element has a central position.
Button element with an inline-block
By default, button and link elements are set to display: inline-block. You will enclose a part with an inline-block set within the document’s usual left-to-right flow on the page.
This means that if there is sufficient horizontal space between two inline-block components, they will appear side by side.
This is comparable to elements with display: inline set, except that inline-block elements, can have their height and width controlled, but not inline elements.
Using text-align: center to center the text
By setting text-align: center on a parent element, you can center inline-block (and inline) elements.
Our button> element is enclosed in a div> with text-align: center set.
With a fixed width, this is a block button element.
Text-align: center cannot be used to center block components because they are by default full-width unless provided a static width.
If you ever need to set a button’s static width, you can use this technique to center the button on the page.
Assume we have a button that is 200px wide. Even though it is only 200px wide, it will not allow any additional elements to be placed adjacent.
You can center a block-level element by setting margin-left and margin-right to auto. To do this, we can use the shorthand margin: 0 auto. (This also zeroes out the margin-top and margin-bottom.)
Using flexbox to center
Alternatively, you can use flexbox to center both inline-block and block elements.
Wrap the button in a parent div> and make it visible: center flex and justify-content.
The flexbox settings allow for horizontal and vertical centering of the button. We can center the button element horizontally by utilizing the CSS align-items property with the value center. At the same time, we may use the CSS property justify-content in conjunction with the value center to vertically center the button element.
To center a button element horizontally and vertically, we must provide the CSS properties justify-content and align-items in addition to the value center.
Utilization of the CSS transform property
Apart from the flexbox property, we can also use a set of CSS properties to center align the button horizontally and vertically. Add relative and absolute positions to the container class and the class containing the button. Now, using left:50% and top:50%, center the button in the container. Additionally, utilize transform: translate (-50 percent ,-50 percent ).
Two buttons adjacent to one another
Occasionally, you may wish to have two buttons adjacent to one another but centered on the page.
You may accomplish this by wrapping both buttons in a parent div> and centering them on the page using flexbox.
Notably, we added margin-right: 20px to the first button to separate them.
Using the flexbox and grid CSS models to center a button
Additionally, you can center a button element by changing the display mode of the container element to flex or grid and adding the justify-content: center property to it.
For instance, if you use a div> as the container for the button> element, this CSS rule will center the discontent >’s horizontal:
.center-h {
display: flex; /* or display:grid */
justify-content: center;
}
The advantage of using a flexbox or grid CSS architecture is that you may center content vertically and horizontally.
Final Thoughts on how to horizontally center a button in CSS
These are the CSS methods for centering a button horizontally. All of the strategies are beneficial in their own right, depending on their intended usage and purpose. However, the best technique is to make use of the Flex-box property. And the other is your choice of method that you believe is most appropriate for your problem and scenario.
Also read our guide on: How to center a video in HTML!
