Многие из нас встречали сайты, на которых есть своеобразный “вход” или же “Intro” который расположен строго по центру экрана и нам предлагается либо выбор языков либо быстрый переход на необходимый раздел.
Сегодня я хотел бы рассказать Вам как при помощи CSS сделать наш элемент отцентрированным точно в середине экрана, то есть, и вертикально и горизонтально сосредоточенным.
.center {
position: fixed;
top: 50%;
left: 50%;
}
Данный класс ставит правый верхний угол элемента точно в центре экрана.
Для точного выравнивания по центру, нам необходимо применить половинные отрицательные значения ширины и высоты нашего элемента.
Наверное самый давний и самый надежным метод, но только в оригинале {position:absolute}
prst - 16-03-09 13:03:29
Спасибо большое! То что надо!
Suver - 3-03-09 23:03:55
и советую заменить position: fixed; на position: relative; а то в эксплорере уезжать будет
АМХ - 2-12-08 20:12:55
Ты написал не про центр экрана, а про центр страницы...
Т.к. документ может быть шире/выше самого экрана...
КГ/АМ
Nick - 10-10-08 22:10:11
Поменяй местами значения margin-top и margin-left. У тебя даже на картинке не правильно.
maza - 7-08-08 09:08:07
ну, очень познавательно :-D
wmas - 4-02-08 20:02:32
Гораздо сложней блок в блоке, особенно если надо поверху...
В CSS есть vertical-align, но вроде как не работает с блоками, например когда надо текст по вертикали сцентрировать, приходится padding использовать... :)
gich - 24-03-09 15:03:52
Наверное самый давний и самый надежным метод, но только в оригинале {position:absolute}