how to align in center with css

I have two button that are aligned in the center using display: block; . The problem is that one is on top of the other, to stay side by side I used display: tale-cell; and the problem and they are not in the center.

How do I put one side by side and aligned in the center of the page?

button {
    display: table-cell;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    margin: 20px auto;
    cursor: pointer;
    border-radius: 3px;
}

<button  type='submit'>bt1</button>

<button  type='submit'>bt2</button>

I would solve it like this:

<div class="linha">
    <div class="botoes">
        <button /> <button />
    </div>
</div>

CSS:

.linha { width:100%; }
.botoes { margin: 0 auto 0 auto; text-align: center;     }

Other Shape

HTML

<div class="btns">
  <button  type='submit'>bt1</button>
  <button  type='submit'>bt2</button>
</div>

CSS

.btns{
  text-align: center;
}
button {
    display: inline-block;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    margin: 20px 5px;
    cursor: pointer;
    border-radius: 3px;
}