Здравствуйте! Никак не соображу почему третий 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>
