Center <a> tag in div

Question

Currently having an issue with my button. I want to be able to center my 'a' tag but at the moment it will only stick to the left side. I have tried using "display:block" but this will make my button take up the full width of any div it's been put in.

HTML:

<a href="#" class="button blue">Apply Now</a>

CSS:

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer 1

Use a div to center the link

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.container{
  width: 100%;
  text-align: center;
}

<div class="container">
  <a href="#" class="button blue">Apply Now</a>
</div>

Answer 2

Use the text-align: center; on a parent element to center align all the child elements inside it. They(child elements) do not have to be block level elements for the same. Your question has the concern that you do not want to take up the full space of the parent div by using display:block on your a tag.

You don't have to, even if you specify display:inline-block on your a tag and wrap it inside a parent with text-align: center;, it will solve your task.

Alternatively, you can use margin-left:25% or so, in case the above answer does not suit your need.

Feel free to drop in the code in case you need more help on this.

Thanks,
Yaman