Почему нет простого позиционирования по центру?

Question

[Николай Чуприк]

Меня давно занимает вопрос. Почему для позиционирования блока по центру (по вертикали и горизонтали) так и не существует одной простой директивы (ладно пусть двух) ? Расположение по центру это же то, с чем человек сталкивается сразу же в html-вёрске. Почему надо пользоваться всякими "рецептами" с отрицательными отступами, флэксами и прочей фигнёй? Почему так устроен мир? Какие на то причины?

Comments

[Hyubert]

Флэкс не "рецепт", а технология специально для легкого позицирнирования. Ее и используйте:

justify-content: center;
align-items: center;

Answer 1

[ink]

как это нету :

display:flex;
justify-content:center;
align-items:center;

вот это отцентрирует любой блок потомок по вертикали и по горизонтали: https://codepen.io/topicstarter/pen/MVbYMg

Второй вариант с позиционированием : https://codepen.io/topicstarter/pen/QmGbWP

Comments

[Николай Чуприк]

Я всё понимаю, так в общем-то и делаю. Но flex требует обёртки, т.е. чего-то внешнего, не относящегося к элементу. Получается, я не могу сделать компонент сам по себе, который будет появляться по центру того места, куда я его определю. Об этом я и говорю, что получается вечно через жопу. Извините, не могу молчать!

P.S.: Я стремлюсь к минимуму вложенных дивов. По большому счёту див — структурный, т.е. смысловой элемент. Ненавижу вёрстку, где идёт этажерка дивов обёртки, весь смысл которой — каскадная передача стилей (этот див у нас position:absolute, следующий — рамка, следующий — позиционирование и т.д.).

Answer 2

[Dima Polos]

Чтоб жизнь малиной не казалась))
Сейчас уже есть, вот вам написали про флексы.
Хотите одной строчкой отцентровать элемент, задайте ему margin: auto, или как писали выше, разница в том, что justify-content и align-items родителю, а margin auto потомку.

Answer 3

[Ivan Bogatov]

Кроме всего перечисленного, IT-разработка как раз чудесна тем, что ранее написанный код можно использовать очень много раз. Напишите один раз любое центрирование (хоть лёгкий флекс, холь аддцкий хардкор на 10 строк) и используйте везде.

Answer 4

[Lynn «Кофеман»]

По большому счёту потому что html/css изначально были придуманы для документов и вертикальное центрирование было не нужно.

А для горизонтального всегда была куча способов начиная с тега center