Абсолютно центриране на текст

[bganonymous]

Искам да напиша текста "123" на страницата, и той да бъде центриран, както на реда, така и на колоната (x, y). Хоризонтално и вертикално центриране.

 

[mapka7a]

единия начин е да ползваш position:absolute; който не е много препоръчителен, особено при респонсив дизайн, този текст в див ли се намира, виж тази тема http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

 

[Fakeheal]

Единия вариант е да накараш 2 дива да действат като таблица и да използваш vertical-align: middle; заедно с text-align: center;

Нещо такова:
[css]html, body {
height: 100%;
min-height: 100%;
}

div.pseudo-table {
display: table;
border: 1px solid black;
height: 100%;
width: 100%;
min-height: 100%;
}

div.pseudo-td {
width: 100%;
vertical-align: middle;
text-align:center;
display: table-cell;
}[/css]

<div class="pseudo-table">
    <div class="pseudo-td">123</div>
</div>

Демо: http://jsfiddle.net/3Lkn89kj/

Това работи в брауъзри, които поддържат CSS2.

Aко искаш поддръжка и на IE6/7, трябва малко да използваш други стилове. Както по-горе са показали с абсолютно позициониране.

Въпреки че, мисля, че поддръжката за браузъри, които не взимат под внимание css2 руловете, е излишна.

Cheers,
Iv