Как отцентрировать элементы при помощи CSS

Существуют различные элементы в веб дизайне для которых нужен особый подход для того чтобы расположить в центре. Так для текста используется свойство text-align, а вот для простых графических элементов или, к примеру, изображений необходимо находить свой подход.

И так представим, что у нас есть чёрный квадрат следующих размеров: height — 200px, width — 200px
Описывается он следующим образом

div
{
height:200px;
width:200px;
background:#000;
}

1. Попробуем разместить его в центре при помощи свойства margin
рис 1

Распишем более подробно для тех, кто не знаком с сокращениями в CSS
рис 2

Используя свойство margin необходимо всегда помнить о том, что у вас должен быть установлена ширина общего блока, высота не имеет значения/ Можно использовать контент, который будет определять границы. Несмотря на то, что этот трюк будет работать с большинством блоков, он не будет работать с вертикальным расположением.

div {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: auto;
}
 
p {
  width: 60%;
  margin: auto;
  font: 14px/1.5 Helvetica, sans-serif;
} 

2. Следующий способ подразумевает центрирование элементов с помощью относительных свойств.

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
   
  /*Метод 2*/
  margin: 0px 0 0 -50px;
  left: 50%;
}

Следующий способ

Используя простую формула и зная значения ширины, вы сможете использовать второй способ для того чтобы разместить в центре необходимый блок.рис 4

Теперь разместим наш блок чётко по середине контейнера, в котором он находится

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
   
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
   
  /*Метод 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

Таким образом наш блок окажется точно по середине.
рис 5

3. Чтобы разместить фоновое изображение по центру необходимо всего лишь добавить парочку свойств

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

4. Чтобы разместить текст в центре необходимо, как было уже сказано выше, использовать стандартное свойство text-align

.container {
  height: 200px; /*Обязательно установите line-height */
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *