Вирівнювання DIV по центру за допомогою полів

При обробці веб-елементів браузер враховує три властивості: padding, marging та border. Відступи padding – це простір між контентом і його кордоном. Margin — поля, що відокремлюють один об’єкт від іншого. Border — це лінії вздовж блоків. Вони можуть бути призначені відразу зі всіх або тільки з одного боку:

div{
border: 1px solid #333;
border-left: none;
}

Ці властивості додають вільний простір між об’єктами, а також допомагають вирівнювати їх і розміщувати потрібним чином. Наприклад, якщо блок з картинкою потрібно змістити від лівого краю до центру на 20%, ви привласнюєте елементу margin-left зі значенням 20%:

.block-with-img{
margin-left: 20%;
}

Також елементи можна форматувати використовуючи значення ширини та негативні відступи. Наприклад, є блок з розмірами 200px на 200px. Спочатку призначимо йому абсолютне позиціонування і змістимо його до центру на 50%.

div{
position: absolute;
left: 50%;
}

Тепер, щоб DIV по центру був розташований ідеально, задаємо йому негативний відступ вліво, рівний 50% його ширини, тобто -100 пікселів:

margin-left: -100px;

В CSS такий спосіб називають «видалення повітря». Але у нього є істотний недолік у необхідності проводити постійні розрахунки, що досить складно зробити для елементів з кількома рівнями вкладеності. Якщо задані значення padding та border-width, браузер за умовчанням вирахує розміри контейнера як суму товщини кордонів, відступу праворуч, ліворуч і самого контенту всередині, що теж може стати несподіванкою.

Тому, коли треба вирівняти DIV по центру, використовуйте властивість box-sizing зі значенням border-box. Воно не дасть браузеру додавати значення відступів і меж загальній ширині елемента DIV. Щоб підняти або опустити елемент, також застосовуйте негативні значення. Але призначити в такому разі їх можна або верхнім, або нижнім краєм контейнера.