Казалось бы, тривиальная задача: выровнять блок <div> по центру страницы с помощью css. Но на первых этапах изучения html и сss может серьезно озадачить начинающего веб - мастера. Сам сталкивался с такой проблемой, когда пытался выровнять <div> на макете сайта, когда только начинал изучать веб - программирование. Что и послужило началом для написания этой статьи.)
Итак, приступим:
Допустим, у нас есть блок <div> шириной 100px с текстом внутри.
- Чтобы выровнять блок <div> по центру c относительным позиционированием, необходимо обнулить у него все отступы:
width:100px;
position: relative;
margin:0 auto}
- Чтобы выровнять блок <div> с абсолютным позиционированием, необходимо дополнительно обнулить координаты left и right:
width:100px;
position: absolute;
margin:0 auto;
left:0
right:0}
При абсолютном позиционировании координаты left, right, bottom,top отсчитываются относительно ближайшего позиционированного элемента. Если такой элемент отсутствует, то отсчет координат идет от краев документа.
margin: 0 25% 0 25%;
width: 50%;}