Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

How to horizontally center a flexible width button using only css

Ever had to horizontally center a button only to find that unless you give it a fixed width, it wont center align. For example, it is not uncommon to find the below code being used to horizontally align a button.

.my-btn {
  width: 200px;
  margin-left: auto;
  margin-right: auto;

Well, although the above will work in some cases, you’re better off(at least in terms of internationalization) when you allow your buttons to be of a flexible width. But then, how do you let it be horizontally aligned?

There is a very simple trick to achieve this.
Wrap your button in a parent div and give that parent div a style of text-align: center;

.my-btn {
  margin-left: auto;
  margin-right: auto;

.btn-container {

Take a look at this fiddle for a working example.

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...