Центрирование контента

Для горизонтального центрирования:

• text-align: center – центрирует инлайн-элементы в блоке.

  пример:

  <style>
  .outer {
  text-align: center;
  border: 1px solid blue;
  }
  </style>
  
  <div class="outer">Текст</div>
  

  Текст
  Для центрирования блока это уже не подойдёт, свойство просто не подействует.
• margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

  пример:

  <style>
  .outer {
  border: 1px solid blue;
  }
  .inner {
  width: 100px;
  border: 1px solid red;
  margin: auto;
  }
  </style>
  
  <div class="outer">
  <div class="inner">Текст</div>
  </div>
  

  Текст
  Пооучается что слева и справа браузер автоматически выделяет одинаковое пространство, и блок визуально становиттся по центру.

Для вертикального центрирования одного блока внутри другого:

• Если размер центрируемого элемента известен, а родителя – нет:

  Родителю position:relative, потомку position:absolute; top:50% и margin-top:-<половина-высоты-потомка>. Аналогично можно отцентрировать и по горизонтали.

  пример

   <style>
   .outer {
   position: relative;
   height: 5em;
   border: 1px solid blue;
   }
   
   .inner {
   position: absolute;
   top: 50%;
   margin-top: -0.625em;
   border: 1px solid red;
   }
   </style>
   
   <div class="outer">
   <div class="inner">Текст</div>
   </div>
   

  Текст

• Если нужно отцентрировать одну строку в блоке, высота которого известна:

  Поставить блоку line-height: <высота>. Нужны конкретные единицы высоты (px,em…). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height.

  пример

    
    <style>
    .outer {
    height: 5em;
    line-height: 5em;
    border: 1px solid blue;
    }
    </style>
    
    <div class="outer">
    <span style="border:1px solid red">Текст</span>
    </div>
    

  Текст

• Высота родителя известна, а центрируемого элемента – нет:

  Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block.

  пример:

   
   <style>
   .outer {
   line-height: 120px;
   }
   .inner {
   display: inline-block; /* центрировать..*/
   vertical-align: middle;  /* ..по вертикали */
   line-height: 1.25; /* переопределить высоту строки на обычную */
   border: 1px solid red;
   }
   </style>
   <div class="outer" style="height: 120px;border: 1px solid blue">
   <span class="inner">Центрирован<br>вертикально</span>
   </div>
   

  Центрирован
  вертикально

• Высота обоих элементов неизвестна.

  Три варианта:
  • Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell или реальной таблицы, и поставить ему vertical-align:middle. Отлично работает, но мы имеем дело с таблицей вместо обычного блока.

    пример:

    таблица

     
     <style>
     table {  border-collapse: collapse; }
     td {
     border: 1px solid blue;
     height: 100px;
     }
     </style>
     
     <table>
     <tr>
     <td style="vertical-align: top">top</td>
     <td style="vertical-align: middle">middle</td>
     <td style="vertical-align: bottom">bottom</td>
     </tr>
     <&/table>
     

    top

    middle

    bottom

    ячейка(% не сработает, т.к нет полной таблицы):

     <div style="display: table-cell; vertical-align: middle; height: 100px; width: 300px; border: 1px solid red">
     <button>Кнопка<br>с любой высотой<br>и шириной</button>
     </div>
     

    Кнопка
    с любой высотой
    и шириной
    «упакуем псевдоячейку» в элемент с display:table, которому и применим процентное соотношение:

     <div style="display: table; width: 100%">
     <div style="display: table-cell; vertical-align: middle; height: 100px; border: 1px solid blue">
     <button>Кнопка<br>с любой высотой<br>и шириной</button>
     </div>
     </div>
     

    Кнопка
    с любой высотой
    и шириной
  • Решение с вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.

    пример:

     <style>
     .outer:before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     }
     
     .inner {
     display: inline-block;
     vertical-align: middle;
     margin-left: -0.35em;
     }
     
     .outer {
     text-align: center;
     }
     </style>
     <div class="outer" style="height:100px; width: 100%; border:1px solid black">
     <span class="inner" style="border:1px solid red">
     Центрированный<br>Элемент
     </span>
     </div>
     

    Центрированный
    Элемент
  • Решение с использованием flexbox.

    пример:

    
    <style>
    .outer {
        display: flex;
        justify-content: center; /*Центрирование по горизонтали*/
        align-items: center;     /*Центрирование по вертикали */
    }
    </style>
    
    <div class="outer" style="height:100px; width: 100%; border:1px solid black">
        <span class="inner" style="border:1px solid red">
            Центрированный<br>Элемент
        </span>
    </div>
    

    Центрированный
    Элемент