How to Center a button horizontally in a div
In this post we will give you information about How to Center a button horizontally in a div. Hear we will give you detail about How to Center a button horizontally in a divAnd how to use it also give you demo for it if it is necessary.
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 > <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 > <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 > <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.
Hope this code and post will helped you for implement How to Center a button horizontally in a div. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs