Вертикальное выравнивание div

Question

Мне нужно выровнять красный треугольник в середине элемента div с текстом, но я сделал несколько неудачных попыток.

http://jsfiddle.net/aq9Laaew/207191/

 <div class="container">
  <div class="row">
    <div class="col-2 opt ">teste
    testetestete
    uaoijpajpa
    ]jpiajpiajpo
    piajpajpoçajp

    dada
    dadad
    hjaojpaj
    kpakák
    pjapp--´q
    oiaijaçlma
    kjpoakpa-k
    </div>
      <div class="col wrp p-0">
        <div class="tri"></div>
      </div> 
  </div>
</div>

Css

.opt {
      border: 1px solid red;
      color: red;
      display: block;
    }
    .wrp {
      padding-top: 50%;
    }
    .tri {
      width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-left: 12px solid red;
        border-bottom: 15px solid transparent;
    }

Answer 1

Попробуй сейчас,

http://jsfiddle.net/aq9Laaew/207230/

Я добавил

  position: absolute;
  top:50%;
  transform:translateY(-50%);

до .tri класса

Answer 2

Существует простой способ, просто добавьте margin: auto 0; к вашему классу .wrp (это займет автоматическое поле сверху и снизу в зависимости от вашего контента) и удалите padding-top: 50% . Поскольку вы добавили границу для класса .col, она будет отображать границу, если вы хотите, чтобы вы могли удалить границу. вот код:

    .wrp {
      margin: auto 0;
      border: 0;
    }

Попробуйте сейчас: https://jsfiddle.net/aq9Laaew/207289/

Answer 3

Вы можете добавить следующее свойство в класс tri:

top: 50%;
position: relative;
transform: translateY(-50%);

position: relative разрешить другое свойство, которое может сместить элемент из его нормального положения

top: 50% установит вертикальное положение треугольника на 50% от его контейнера.

transform: translateY(-50%) сместить треугольник на половину его собственного роста