Text-align: center

Применяя text-align: center , встроенное содержимое центрируется в строке строки. Однако, поскольку внутренний div по умолчанию width: 100%, вы должны установить определенную ширину или использовать одно из следующих значений:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

  
Foo foo

---

Маржа: 0 auto

Использование margin: 0 auto - еще одна опция, и она более подходит для совместимости старых браузеров. Он работает вместе с display: table .

#inner {
  display: table;
  margin: 0 auto;
}

  
Foo foo

Flexbox

display: flex ведет себя как элемент блока и выдает его содержимое в соответствии с моделью flexbox. Он работает с justify-content: center .

Обратите внимание: Flexbox совместим с большинством браузеров, но не со всеми. См. здесь для полного и обновленного списка совместимости браузеров.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

  
Foo foo

Transform

transform: translate позволяет вам изменять координатное пространство модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Для центрирования по горизонтали требуется position: absolute и left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

  
Foo foo

(Устаревший)

Тег

#inner {
  display: inline-block;
}

  
    
Foo foo