eu tenho a seguinte section, e preciso que as Divs fiquem centralizadas horizontalmente na minha Grid do Boostratp 3. Ele sempre ficam no lado Esquerdo e não consido mudar isso.
<section id="servicos">
<div class="container">
<h5>Hospedagem</h5>
<div class="row">
<div class="col-sm-6" style="border: 1px solid red">
<div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
</div>
<div class="col-sm-6" style="border: 1px solid red">
<div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
</div>
</div>
<div class="mais-hospedagem" style="border: 1px solid red">
<button class="btn btn-custom btn-roxo btn-lg bt-destino mais-hospedagem"><b>mais hospedagens</b></button>
</div>
</div>
</div>
</section>
Eu tente usar o seguinte CSS:
.airbnb-embed-frame{
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}