Por favor! Como centralizo esta tabela e preços? Ela somente fica na esquerda!

[tabl 0]

<style>
body, input, textarea {
font: 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #FAFAFA;
color: #656565;
}

.pricing-table {
display: inline-block;
margin-top: 20px;
margin-bottom: 0;
width: 100%;
}

.layers {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0),0 8px 0 -5px #FCFCFC,0 8px 1px -4px rgba(0, 0, 0, 0.15),0 17px 0 -10px #FCFCFC,0 17px 1px -9px rgba(0, 0, 0, 0.15);
}

.clearfix:after, .clearfix:before {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
[class *="col-"] {
margin: 0;
position: relative;
margin-right: 30px;
margin-bottom: 20px;
float: left;
}
.col-3 {
width: 210px;
}

.plan-item {
position: relative;
overflow: hidden;
border: 1px solid #E2E1E0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align: center;
background-color: #FFF;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
background-image: url(http://hbzone.hbthemes.netdna-cdn.com/themes/aegaeus_wp/wp-content/themes/AegaeusWP/images/sprites/action-border.png);
background-repeat: repeat-x;
background-position: center bottom;
}


.plan-item-header {
padding: 0px 15px 15px;
text-decoration: none;
color: #767676;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom: 1px solid #F4F4F4;
background-color: #FCFCFC;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

h4 {
font-size: 16px;
letter-spacing: -.2px;
line-height: 36px;
}
.plan-item ul {
margin: 20px 0 0;
}
.plan-item li, .plan-item ul {
margin: 0;
padding: 0;
}


.plan-item li, .plan-item ul {
margin: 0;
padding: 0;
}
.plan-item li:nth-child(even) {
background-color: #FAFAFA;
}
.plan-item li {
padding: 10px 20px;
border-bottom: solid 1px #F4F4F4;
color: #545454;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

.plan-item-button {
padding: 30px 0;
}
.plan-item-button a {
padding: 10px 20px;
background-color: #567;
color: #D9D9D9;
font-size: 12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 700;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
-moz-box-shadow: inset 0 14px 0 0 rgba(190,190,190,.1);
-webkit-box-shadow: inset 0 14px 0 0 rgba(190, 190, 190, 0.1);
box-shadow: inset 0 14px 0 0 rgba(190, 190, 190, 0.1);
  text-decoration: none;
}
.clearfix {
zoom: 1;
}

.plan-item ul {
margin: 20px 0 0;
}
ol, ul {
list-style: none;
}
.plan-item-button a:hover, .page-pagination a.current {
background-color: #FF6838;
}

.plan-item:hover{
border-top-color: #FF6838;
}


li.plan-item-price {
margin-top: -19px;
font-size: 26px;
padding: 20px;
line-height: 1!important;
color: #656565;
font-weight: 700;
}













</style>


<div class="pricing-table clearfix">
<div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Simestral</h4><ul class="plan-item-features">
<li class="plan-item-price">R$000</li>
<li>Válido por 6 meses</li>
<li>Domínio e hospedagem inclusos</li>
<li>1 E-mail Personalizado (10GB de espaço)</li>
<li>Cobrada taxa mínima de Atualização</li>
<li>Site seguro</li>
<li>Suporte via e-mail</li>
</ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div>
<div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Anual</h4><ul class="plan-item-features">
<li class="plan-item-price">R$000</li>
<li>Válido por 1 Ano</li>
<li>Domínio e hospedagem inclusos</li>
<li>2 E-mails Personalizados (10GB de espaço)</li>
<li>Desconto na taxa mínima de Atualização</li>
<li>Site seguro</li>
<li>Suporte via E-mail/Whatsapp</li>
</ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div>
<div class="col-3"><div class="plan-item layers"><h4 class="plan-item-header">Pentacampeão</h4><ul class="plan-item-features">
<li class="plan-item-price">R$000</li>
<li>Válido por 5 Anos</li>
<li>Domínio e hospedagem inclusos</li>
<li>10 E-mails Personalizados (10GB de espaço)</li>
<li>Sem taxa de Atualização</li>
<li>Site seguro</li>
<li>Suporte via E-mail/Whatsapp/Telefone</li>
</ul><div class="plan-item-button"><a href="#">ADQUIRIR</a></div></div></div>
</div>

 

[snowstormdelivery 19]

Você pode utilizar a abordagem flexbox. Dessa maneira, as propriedades necessárias são display e justify-content.

 

Veja como centralizei as tabelas, usando flexbox:    

.pricing-table {
    display: flex; /* Código que adicionei */
    justify-content: center; /* Código que adicionei*/
    margin-top: 20px;
    margin-bottom: 0;
    width: 100%;
}

Se precisar, pode conferir quais versões de navegadores suportam isso, aqui: https://caniuse.com/#feat=flexbox

 

Não sei explicar o flexbox, mas vou recomendar os seguintes links, para tal fim:

• CSS Tricks;
• Tableless;
• W3Schools;
• Bootstrap CSS Girl.

[tabl 0]

Muito Obrigado Joao Lucas!

[Maujor 144]

@tabl

Faça a seguinte alteração e acréscimos  nas CSS:

.pricing-table {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 0;  
  width: auto; <----------------- altere
  position: relative; <---------- acrescente
  left: 50%; <------------------- acrescente
  transform: translate(-50%); <-- acrescente
  margin-left:15px; <------------ acrescente
}

Para saber mais sobre centralização com uso de CSS consulte este tutorial. 

[tabl 0]

Última dúvida, existe alguma possibilidade de incrementar algo neste código para a navegação via mobile? Nos dispositivos moveis as tabelas aparecem uma ao lado da outra fazendo com o que uma delas apareça só ate a metade... gostaria que ficassem uma embaixo da outro somente na visualização em dispositivos móveis. É possível?

 

Obrigado!

[snowstormdelivery 19]

43 minutos atrás, tabl disse:

Última dúvida, existe alguma possibilidade de incrementar algo neste código para a navegação via mobile? Nos dispositivos moveis as tabelas aparecem uma ao lado da outra fazendo com o que uma delas apareça só ate a metade... gostaria que ficassem uma embaixo da outro somente na visualização em dispositivos móveis. É possível?

 

Obrigado!

 

Sim, é possível. Para isso, basta utilizar a propriedade flex-wrap com value wrap. Portanto, essa declaração configura se a linha dos flex itens poderá se quebrar ou não, quando não houver espaço mínimo.

.pricing-table {
  display: flex;
  flex-wrap: wrap; /* Código adicionado */
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 0;
  width: 100%;
}

Já a abordagem do @Maujor, não precisa desse conserto.

[tabl 0]

Muito Obrigado! Resolveram meus problemas!