CSS Centralizar Verticalmente com Bootstrap

[fredkissfree]

Tenho o seguinte código:

<div class="row">
  <div class="col-md-6">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe src="video.mp4?modestbranding=1&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>
  <div class="col-md-6  ml-auto">
    <h2 class="title">TESTE</h2>
    <img src="imagem.png">
  </div>
</div>

de um lado fica o vídeo e do outro uma imagem, eu gostaria de fazer com que o vídeo fique centralizado verticalmente no meu col-md, como fazer?

[makotsunami]

@fredkissfree

 

Boa tarde parceiro!

 

Acho que você consegue solucionar esse problema com flexbox.

 

Coloca uma classe nessa sua coluna, .center por exemplo.

 

.center {
	display: flex;
	justify-content: center;
	align-items: center; /** ISSO AQUI ALINHA VERTICALMENTE */
}

 

Se não funcionar tenta utilizar o !important, pois uma das muitas desvantagens do Bootstrap é ele ser difícil de sobrescrever os estilos originais.

 

.center {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important; /** ISSO AQUI ALINHA VERTICALMENTE */
}

 

EDIT: Não se esqueça de verificar se o Bootstrap já não tem uma classe .center, pode dar ruim. Cria com um nome não convencional, ou cria em português: .centro.

[fredkissfree]

@makotsunami Deu certo, obrigado.