Как выровнять блок div по центру страницы

5367

Казалось бы, тривиальная задача:  выровнять блок <div> по центру страницы с помощью css. Но на первых этапах изучения html и сss может серьезно озадачить начинающего веб - мастера. Сам сталкивался с такой проблемой, когда пытался выровнять <div> на макете сайта, когда только начинал изучать веб - программирование. Что и послужило началом для написания этой статьи.)

Итак, приступим:

Допустим, у нас есть блок <div> шириной 100px с текстом внутри.

<div class=block>Привет!</div>
  • Чтобы выровнять  блок <div> по центру c относительным позиционированием, необходимо обнулить у него все отступы:
.block {
width:100px;
position: relative;
margin:0 auto}
  • Чтобы выровнять блок <div> с абсолютным позиционированием, необходимо дополнительно обнулить координаты left и right:
.block {
width:100px;
position: absolute;
margin:0 auto;
left:0
right:0}
Следует учитывать, что margin:0 auto не работает в браузерах  Internet Explorer ниже 8 - ой версии.
При абсолютном позиционировании координаты left, right, bottom,top отсчитываются относительно ближайшего позиционированного элемента. Если такой элемент отсутствует, то отсчет координат идет от краев документа.
Если ни один из выше перечисленных способов не помог, то есть еще такой вариант:
.block {
margin: 0 25% 0 25%;
width: 50%;}

Этот css - костыль помогает отцентровать блок даже в "запущенных случаях".
На этом все. Надеюсь, что статья была вам полезной!
css

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code