4px и line-height

by NMitra

HTML

<div class="vyrovnyat"> <div> <div>Этот текст<br>По середине<br>По середине</div> </div> </div>

CSS

.vyrovnyat {
  background: #fff5d7;
  text-align: center;
  line-height: 300px;
  font-size: 0;
}
.vyrovnyat > div {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.vyrovnyat div div {
  font-size: medium;
  line-height: 25px;
  background: red;
}

JavaScript

var raz = document.querySelector('.vyrovnyat div div');
var dva = document.querySelector('.vyrovnyat');
var bottom = dva.getBoundingClientRect().bottom - raz.getBoundingClientRect().bottom;
var top = raz.getBoundingClientRect().top - dva.getBoundingClientRect().top;
alert(top + "=" + bottom);