Вертикальное выравнивание с помощью before, елемент не влазит?

Question

[Raz-Dva]

Как и многие использую before для вертикального выравнивания. И вот если елемент по ширине не влазит, он выходит за род. блок. Что нужно делать в этом случае? Указывать ширину меньше чем у родителя? или использовать минусовой margin для псевдоелемента?

<div class="parent">
      <span class="child">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum, veniam alias, dolore obcaecati at illo quis consectetur quod quisquam necessitatibus? Voluptatem distinctio odio, quia rerum iusto dolore quod rem!
     </span>
  </div>

.parent{
    width: 200px;
    height: 200px;
    background:grey;
    text-align: center;
    overflow: hidden;
}
.child{
    background:red;
    height: 40px;
    overflow: hidden;
    display: inline-block;
    vertical-align:middle;
}
.parent:before{
    content: "";
    display: inline-block;
    min-height: inherit;
    height: 100%;
    vertical-align: middle;
  /*margin-left:-5px; если раскоментировать появиться нужный блок*/
}

jsfiddle.net/huham/1170

Comments

[Ankhena]

Используйте флекс :)

[Raz-Dva]

Ankhena W: для IE 9 это не сработает?

Answer 1

[ArturArturov]

Можно flex использовать, можно

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

Comments

[Raz-Dva]

А вот минусовый margin можно использовать в этом случае?