Center tag works on link but not CSS or align attribute

Question

I'm trying to center a button that is an <a> tag. However, the only thing that will work is the <center> tag. I've tried using <a style="text-align: center">Button</a> and <a align="center">Button</a>, but none of the two worked. Why is it that only the center tag works?

My CSS is this:

.btn {
    color: white;
    background-color: orange;
    padding: 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-decoration: none;
    transition: 200ms all;
}

.btn:hover {
    background-color: #FFC964;
    color: white;
    cursor: pointer;
}

HTML:

<a href="http://example.com" class="btn">Button</a>

Answer 1

The <center> tag is deprecated and is most likely to be removed in all the browsers. And <a> tag is inline in nature, so text-align: center should be given for it's parent block element:

.make-center {text-align: center;}

<div class="make-center">
  <a href="#">I am a link</a>
</div>

In the above code, the <div class="make-center"> tag acts as a <center> tag.

Answer 2

Does your a element have the .btn class?

Try adding this CSS to it:

display:block;
margin:0 auto;

Otherwise, create a jsfiddle for us which reproduces the problem. You are not showing your entire CSS and markup.