[NMitra]

Здравствуйте! Никак не соображу почему третий div не строго по центу, а съехал на 4px. Меняла font-size и line-height и бестолку, всё равно 4px. Пример на http://jsfiddle.net/NMitra/Ks9wm/

<style>
.vyrovnyat {
  background: #fff5d7;
  text-align: center;
  line-height: 300px;
}
.vyrovnyat > div {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.vyrovnyat div div {
  line-height: 25px;
}
</style>

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

<script>
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);
</script>