Привет. Расскажу о том, как в вёрстке выровнять блок с абсолютным позиционированием по центру, чтобы он стоял ровно по центру экрана.
Для этого нам нужен сам блок, скажем, размером 600×400 пикселей.
Сам код выглядит так:
<div id='centerred_block'>Я нахожусь ровно по центру экрана</div>
#centerred_block { color: #000; background: #FFF; border: 1px solid #000; width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; }
Самое важное выделено в css. Суть такая:
- Определяете ширину и высоту блока. В нашем случае,
width: 600px; height: 400px;
- Позиционируете блок
position:absolute
, установив его на уровеньtop:50%; left: 50%
- Выравниваете блок по горизонтали, сдвинув его влево на половину ширины блока. В нашем случае,
margin-left: -300px;
- Выравниваете блок по вертикали, сдвинув его вверх на половину высоты блока. В нашем случае,
margin-top: -200px;
На результат можно глянуть на JsFiddle
Свежие комментарии