Как выровнять div по центру в HTML

Ранее были показаны способы вертикального выравнивания, теперь остановимся на горизонтальном.

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

text-align: center; по центру	text-align: justify; - по ширине, когда браузер добавляет пробелы между словами, чтобы не было отступов с краёв. text-align: justify; - по ширине выравнивается последняя или единственная строка
text-align: left; по левому краю	text-align: right; по правому краю

Если указать text-align: center для встроенного элемента [занимаемого только ширину содержимого], то ничего не произойдёт, поскольку тег не может себя двигать:

<span style="text-align: center;">текст</span>

текст

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр

<div style="text-align: center;">текст</div>

текст

В качестве содержимого может выступать и другой тег.

<div style="text-align: center;">
  <span>встроенный элемент <br /> в две строки</span>
</div>

встроенный элемент
в две строки

Помог при выравнивании модального окна на CSS:

<div style="text-align: center;">
  <div style="display: inline-block;">обтекаемый <br /> блочный элемент</div>
</div>

обтекаемый
блочный элемент

А вот блочный тег как и при display: table никак не хочет становиться по середине, перемещается лишь его текст

<div style="text-align: center;">
  <div style="width: 50%;">блочный элемент <br /> фиксированной ширины</div>
</div>

блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div style="width: 50%; margin: 0 auto; text-align: center;">блочный элемент <br /> определённой ширины</div>
</div>

блочный элемент
определённой ширины

Чтобы выровнять картинку по центру, нужно прописать, что она стала блочной без указания её width

<img src="URL_изо" style="display: block; margin: 0 auto;"/>

width можно не рассчитывать и при display: table

<div>
  <div style="display: table; margin: 0 auto; text-align: center;">блочная <br /> таблица</div>
</div>

блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева

float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/