Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Центрування елементів

Центрування елементів

Frontend SELF UA
Рівень 22 , Лекція 3
Відкрита

9.1 Горизонтальне центрування

Центрування елементів на веб-сторінці є однією з основних задач веб-дизайну. Воно дозволяє створити естетично приємні та легко читані макети. Нижче ми розглянемо різні методи горизонтального та вертикального центрування елементів, використовуючи сучасні техніки CSS.

1. Центрування блочних елементів за допомогою margin: auto

Один з найпростіших способів центрування блочних елементів – це використання margin: auto.

Приклад:

CSS 
    
      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
        margin: 0 auto;
      }
HTML 
    
      <div class="centered-box"></div>

Пояснення коду:

  • margin: 0 auto;: встановлює автоматичні відступи зліва та справа, центруючи елемент горизонтально

2. Центрування стрічкових елементів за допомогою text-align

Для центрування стрічкових або вбудованих елементів всередині блочного елемента можна використовувати властивість text-align: center.

Приклад:

CSS 
    
      .container {
        text-align: center;
        background-color: #f1c40f;
        padding: 20px;
      }

      .inline-element {
        background-color: #e74c3c;
        display: inline-block;
        padding: 10px;
        color: white;
      }
Вебінар JavaRush
HTML 
    
      <div class="container">
        <div class="inline-element">Стрічковий елемент</div>
      </div>

Пояснення коду:

  • text-align: center;: центрує вбудовані (стрічкові) елементи всередині блочного контейнера

3. Центрування елементів за допомогою Flexbox

Flexbox дає гнучкий і простий спосіб центрування елементів як горизонтально, так і вертикально.

Приклад:

CSS 
    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML 
    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Пояснення коду:

  • display: flex;: встановлює контейнер як Flexbox
  • justify-content: center;: центрує елементи горизонтально
  • align-items: center;: центрує елементи вертикально (буде розглянуто нижче)

9.2 Вертикальне центрування

1. Центрування за допомогою Flexbox

Flexbox надає простий спосіб для вертикального центрування елементів.

Приклад:

CSS 
    
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #2ecc71;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML 
    
      <div class="flex-container">
        <div class="centered-box"></div>
      </div>

Пояснення коду:

  • align-items: center;: центрує елементи вертикально

2. Центрування за допомогою CSS Grid

CSS Grid надає потужні можливості для центрування елементів:

CSS 
    
      .grid-container {
        display: grid;
        place-items: center;
        height: 100vh;
        background-color: #9b59b6;
      }

      .centered-box {
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML 
    
      <div class="grid-container">
        <div class="centered-box"></div>
      </div>

Пояснення коду:

  • display: grid;: встановлює контейнер як CSS Grid
  • place-items: center;: центрує елементи горизонтально та вертикально

3. Вертикальне центрування за допомогою абсолютного позиціонування та CSS трансформації

Використання абсолютного позиціонування та CSS трансформації дозволяє центрувати елементи вертикально.

Приклад:

CSS 
    
      .container {
        position: relative;
        height: 100vh;
        background-color: #e74c3c;
      }

      .centered-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 100px;
        background-color: #3498db;
      }
HTML 
    
      <div class="container">
        <div class="centered-box"></div>
      </div>

Пояснення коду:

  • position: absolute;: встановлює елемент в абсолютне позиціонування відносно контейнера
  • top: 50%;, left: 50%;: зміщує елемент на 50% від верхнього та лівого краю контейнера
  • transform: translate(-50%, -50%);: зміщує елемент на 50% його ширини та висоти для центрування

4. Вертикальне центрування за допомогою таблиці та комірок

Використання таблиці та комірок для центрування елементів вертикально.

Приклад:

CSS 
    
      .table-container {
        display: table;
        width: 100%;
        height: 100vh;
        background-color: #f39c12;
      }

      .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .centered-box {
        display: inline-block;
        background-color: #3498db;
        padding: 20px;
        color: white;
      }
HTML 
    
      <div class="table-container">
      <div class="table-cell">
        <div class="centered-box">Центрований елемент</div>
      </div>
    </div>

Пояснення коду:

  • .table-container: створює контейнер з дисплеєм table
  • .table-cell: створює комірку таблиці з вертикальним вирівнюванням middle
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ