how to align center with css

Question

Guys I got two button that are aligned in the center using display: block;. The problem is that one sits on top of the other, to stand next to the other I used display: tale-cell; and the problem is that they don’t stay in the center.

How do I place one next to the other 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>

Answer 1

I would solve so:

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

CSS:

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

Answer 2

Other Way

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;
}