How to Center a button horizontally in a div
In this tutorial, we are going to learn about how to center a button horizontally in a div element with CSS.
Consider, we have the following button in div:
<div class="container">
<button id="btn">Login</button>
</div>
To center a button horizontally inside a div, add the display:flex
and justify-content: center
to the div
CSS class.
“justify-content: center” centers the button horizontally.
Here is an example:
<div class="container">
<button id="btn">Login</button>
</div>
CSS:
.container{
display: flex;
justify-content: center;
}
or we can add the inline styles to div element using the style
attribute in HTML.
<div style="display: flex;justify-content: center;" >
<button id="btn">Login</button>
</div>
Centering the button in div using absolute position
We can use the absolute positioning in css to center the button horizontally in div.
Here is an example:
<div class="container">
<button id="btn">Login</button>
</div>
.container{
position:absolute;
left:50%;
transform:translateX(-50%);
}
-
In the example above, we have added
position:absolute
to the div element CSS class.So the element breaks out from the normal document flow and positioned to its relative parent (eg: body or parent element). -
The
left:50%
moves the element 50% right from its position. -
The
translateX(-50%)
moves the element 50% left from it’s position.