3 простих способи відцентрувати елемент за допомогою CSS

Автор

Ключові висновки

  • Центрування елементів у веб-макетах завжди було проблемою, але сучасний CSS тепер підтримує просте центральне позиціонування.
  • Flexbox — це найпоширеніший метод центрування елементів, що забезпечує гнучку модель макета, яка дозволяє легко вирівнювати.
  • Сітка CSS і позиціонування CSS також є ефективними методами центрування елементів на веб-сторінці, пропонуючи точний контроль над макетом і вирівнюванням.

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

Дізнайтеся, як відцентрувати div горизонтально та вертикально за допомогою Flexbox, CSS Grid і позиціонування CSS.

Простий HTML-файл для практики центрування

Усі наведені нижче приклади використовують мінімальний HTML-документ для демонстрації центрування за допомогою CSS. Використовуйте цю розмітку та змінюйте CSS відповідно до кожного розділу, щоб побачити, як поводяться ці властивості.

 <!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh - 16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Використання Flexbox для центрування елемента Div

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

Використовуйте наступний CSS, щоб отримати центрування за допомогою Flexbox.

  • Оберніть ваш елемент div у контейнер. Застосуйте властивість display: flex до контейнера, щоб активувати макет Flexbox. У простому тестовому випадку тіло може служити контейнером: 
     body {
      display: flex;
    }
  • Використовуйте властивості justify-content і align-items, щоб вирівняти елементи вздовж головної осі (по горизонталі) і поперечної осі (по вертикалі) відповідно. Щоб відцентрувати обидві осі, установіть для цих властивостей центр. Для простої демонстрації ви також повинні встановити висоту тіла на 100vh, щоб ви могли побачити ефект вертикального вирівнювання. 
     body {
      justify-content: center;
      align-items: center;
    }
  • Надайте div колір фону, щоб візуалізувати його розташування на останній сторінці: 
     div { background-color: red; }

    • Переглядаючи результат у Google Chrome DevTools, ви можете побачити, як дві властивості контролюють вирівнювання вздовж кожної осі:

    Використання сітки CSS для центрування елемента Div

    Використання CSS Grid для центрування елемента є ще одним ефективним методом, який пропонує точний контроль над макетом і вирівнюванням.

  • Визначте контейнер для свого макета та застосуйте стиль сітки display: для активації CSS Grid. У цьому випадку контейнером служить корпус. 
     body {
      display: grid;
    }
  • Використовуйте властивості grid-template-columns і grid-template-rows, щоб визначити структуру вашої сітки. Для центрування буде достатньо одного стовпця та рядка, тому використовуйте 1fr для обох. 
     body {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
  • Використовуйте властивість place-items, щоб відцентрувати вміст сітки як горизонтально, так і вертикально. 
     body {
      place-items: center;
    }
  • Стилізуйте фон вашого елемента div, щоб візуалізувати його в центрі контейнера сітки. 
     div {
      background-color: blue;
    }

    • У цьому випадку одна властивість керує центральним розташуванням div на вашій сторінці:

    Використання позиціонування CSS для центрування елемента Div

    Щоб використовувати властивість позиції CSS для центрування div, вам також потрібно зрозуміти, як працюють перетворення CSS із переходами. Ось покрокова інструкція з прикладом.

  • Щоб розташувати елемент div, переконайтеся, що його контейнер має відносне розташування. Це встановлює контекст відносного позиціонування, тому ви можете розмістити div у центрі його контейнера. 
     body {
      position: relative;
    }
  • Застосуйте абсолютне позиціонування до елемента div, а потім використовуйте властивості top і left, щоб розмістити верхній лівий кут div точно в центрі його контейнера. 
     div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
     background-color: green;
    }

    Трансформація translate(-50%, -50%) переміщує div ліворуч і вгору на половину його ширини та половину висоти.

    • Цей метод працює так, що спочатку центрується верхній кут елемента, а потім переміщується відносно на половину ширини та половину висоти.

    Flexbox, CSS Grid і CSS позиціонування — це потужні інструменти, які можна використовувати для центрування елементів на веб-сторінці. За допомогою Flexbox ви можете центрувати як горизонтально, так і вертикально за допомогою лише кількох рядків коду. Сітка CSS забезпечує потужне двовимірне вирівнювання, і ви можете використовувати позиціонування CSS, щоб центрувати елемент відносно його батьківського контейнера.

    За допомогою цих методів ви можете гарантувати, що ваші веб-сторінки виглядатимуть чисто та професійно.