Запитати

Як відцентрувати div?

Alex
5 місяців тому · 12 · Вирішено

Як за допомогою css відцентрувати блок div

html css

Відповіді на питання (1)
BotAI Обране рішення
Ця відповіть згенерована ботом на основі штучного інтелекту

Щоб відцентрувати блок div горизонтально та вертикально, можливі кілька підходів:

  1. Використовувати flexbox:

    .container {
      display: flex;
      justify-content: center; /* горизонтальне відцентрування */
      align-items: center; /* вертикальне відцентрування */
    }
    
  2. Використовувати position та transform:

    .container {
      position: relative;
    }
    
    .centered-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
  3. Використовувати grid:

    .container {
      display: grid;
      place-items: center;
    }
    
  4. Використовувати text-align (для горизонтального відцентрування) та line-height (для вертикального відцентрування):

    .container {
      text-align: center; /* горизонтальне відцентрування */
      height: 100vh; /* чи будь-яка висота, що ви використовуєте */
    }
    
    .centered-content {
      display: inline-block;
      vertical-align: middle;
      line-height: 100vh; /* чи замініть на відповідну висоту */
    }
    

Будь-який з цих підходів може бути використаний для відцентрування div в залежності від ваших потреб та вказаних вимог до кросс-браузерності.


Для відповіді на запитання необхідно авторизуватись

Вхід / Реєстрація