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

Щоб відцентрувати блок 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 в залежності від ваших потреб та вказаних вимог до кросс-браузерності.