JavaScript | Как выровнять HTML-элемент DIV по центру родительского блока?

Как отцентровать блок DIV внутри другого DIV по вертикали и горизонтали силами JavaScript?

Идея именно в том, чтобы сделать это при помощи языка программирования JavaScript, а не через HTML-разметку или CSS-разметку.

Так как мы работаем с JavaScript, то нас будут интересовать объекты интерфейсов прикладного программирования, которые встроены в браузер. Они существенно расширяют свойства глобального объекта.

Важно знать, что модуль «CSS Display Module Level 3» содержит функции CSS, относящиеся к выравниванию блоков внутри их контейнеров в различных моделях макета блоков CSS:

макет блока (block layout)
макет таблицы (table layout)
макет гибкости (flex layout)
макет сетки (grid layout)

(Выравнивание текста и контента встроенного уровня определяется в [CSS-TEXT-3] и [CSS-INLINE-3].)

CSS — это язык для описания рендеринга структурированных документов (таких как HTML и XML) на экране, на бумаге и т. д.

Код самой простой реализации центрования блоков относительно друг друга на основе FLEX макета

В качестве примера я создам большой красный горизонтальный прямоугольник и помещу в него синий вертикальный прямоугольник.

Весь код данной реализации:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Как выровнять блок DIV по центру родительского блока</title>
</head>
<body>
<script>
   let d1 = document.createElement('div');
   let d2 = document.createElement('div');

   d1.style.maxWidth = '1500px';
   d1.style.maxHeight = '1000px';

   d2.style.maxWidth = '500px';
   d2.style.maxHeight = '800px';

   d1.style.backgroundColor = 'red';
   d2.style.backgroundColor = 'blue';

   d1.style.display = 'flex';
   d1.style.justifyContent = 'center';
   d1.style.alignItems = 'center';

   d1.append(d2);
   document.body.append(d1);
</script>
</body>
</html>

Ключевое здесь:

d1.style.display = 'flex';
d1.style.justifyContent = 'center';
d1.style.alignItems = 'center';

У экземпляра класса CSSStyleDeclaration есть 3 свойства, которые нам нужны для выравнивания по центру:

display
justifyContent
alignItems

Мы сейчас говорим о названиях ключей объекта JavaScript. Каждый этот ключ представляет собой поведение для схожего CSS-свойства по стандарту организации «w3c«.

Отцентровали блок DIV внутри другого блока DIV силами JavaScript

CSS свойство «display» со значением «flex«

Ключ «display» соответствует CSS свойству «display«. В данном случае их имена совпадают.

Ожидается, что пользовательские агенты будут поддерживать это свойство на всех носителях, включая невизуальные. Свойство «display» определяет тип отображения элемента, который состоит из двух основных характеристик того, как элемент генерирует блоки:

«внутренний тип отображения«, который определяет (если это не заменяемый элемент) тип контекста форматирования, который он генерирует, диктуя, как размещаются его блоки-потомки. (Внутреннее отображение заменённого элемента выходит за рамки CSS.)
«внешний тип отображения«, определяющий, как сам основной блок участвует в компоновке потока.

Текстовые прогоны не имеют типа отображения.

Некоторые отображаемые значения имеют дополнительные побочные эффекты: например, list-item, который также создает псевдоэлемент ::marker, и none, из-за которого все поддерево элемента остается за пределами дерева блоков.

Свойство display не влияет на семантику элемента: они определяются языком документа и не зависят от CSS. Помимо значения none, которое также влияет на звуковой/речевой вывод [CSS-SPEECH-1] и интерактивность элемента и его потомков, свойство «display» влияет только на визуальный макет: его цель — предоставить дизайнерам свободу изменять поведение макета. элемента, не влияя на базовую семантику документа.
Значения определяются следующим образом:

CSS свойство «justify-content» со значением «center«

Ключ «justifyContent» соответствует CSS свойству «justify-content«. В данном случае их имена НЕ совпадают. Ключи свойств объектов в JavaScript не могут иметь символ дефиса.

Выравнивает содержимое блока в целом (как объект выравнивания) внутри самого блока (как контейнер выравнивания): вдоль встроенной/строки/основной оси блока (для выравнивания содержимого «justify-content») или блока/столбца/перекрестия ось блока (для align-content). Значения, отличные от нормальных, определены в разделе «§4 Ключевые слова выравнивания«.

Для всех режимов макета объект выравнивания и контейнер выравнивания предполагают режим записи блока, для которого установлено свойство *-content.

CSS свойство «align-items» со значением «center«

Ключ «alignItems» соответствует CSS свойству «align-items«. В данном случае их имена НЕ совпадают. Ключи свойств объектов в JavaScript не могут иметь символ дефиса.

Это свойство указывает выравнивание по умолчанию для всех дочерних блоков (включая анонимные блоки), участвующих в контексте форматирования этого блока.

Значения не имеют специальной обработки и просто ссылаются на align-self.

Информационные ссылки

Стандарт HTML — https://html.spec.whatwg.org/multipage/

Стандарт DOM — https://dom.spec.whatwg.org/

Стандарт Document Object Model (DOM) Level 2 Style Specification — https://www.w3.org/TR/DOM-Level-2-Style/

Стандарт CSS Backgrounds and Borders Module Level 3 — https://www.w3.org/TR/css-backgrounds-3/

Стандарт CSS Box Sizing Module Level 3 — https://www.w3.org/TR/css-sizing-3/

Стандарт CSS Box Alignment Module Level 3 — https://www.w3.org/TR/css-align-3/

Стандарт CSS Display Module Level 3 — https://www.w3.org/TR/css-display-3/