Сначала поместите верхний левый угол div в центр страницы (используя position: fixed; top: 50%; left: 50% )., затем translate перемещает его вверх на 50% высоты div, чтобы центрировать его вертикально на странице. ахаха
>position fixed
Вот где реальный изврат. Абсолюта достаточно и релейтив на контейнер, иначе улетит до ближайшего relative-элемента или если таковых нет, до body.
Есть у меня один проект - там нужно чтобы сайт в том числе работал под IE6. И его реально используют. И дешевле мне заплатить кучу денег за это, чем обновлять все легаси девайсы с IE6.
У меня единственный проект который потребовал IE 6 был сайт кафедры и то, потому что заведующий кафедры которому больше лет чем графу дракуле использовал ПК где ничего кроме IE 6 не было. Такое себе удовольствие три дня подгонять сайт под древние браузеры.
Не знаю, как сейчас, от вёрстки я отошёл ещё до появления гридов, но таблицы я применял и в конце нулевых. Например, в движках, которые не прогоняют текст, вбитый контентмейкерами, через валидацию, можно оборачивать статьи в таблицы. Тогда какой-нибудь незакрытый тег в статье не поломает всю вёрстку нахрен.
Я конечно не верстальщик, но для чего трогать родителя, если легче самому div выставить
align-self: center
Дальше независимо от родителя он всегда будет в центре.
One morning you wake up find out you have access to God’s developer console. What’s the first thing you do with this power?
Discussion
♦ 154 + W 479 & Share
^ BEST COMMENTS ▼
I like forks • 5h
hehe3301 • 7h
sudo rm -rf oceans/*/contents/
*.plástic
sudo rm -rf people/*/*.cáncer sudo rm -rf v
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Вот где реальный изврат. Абсолюта достаточно и релейтив на контейнер, иначе улетит до ближайшего relative-элемента или если таковых нет, до body.
position: absolute;
top: calc(50% - половина высоты);
left: calc(50% - половина ширины);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Хотя…
margin auto
Зачем Вы зашли на сайт с музейного экспоната?
просто не так часто нужно, что бы само запомнилось, специально запоминать нет времени (наверно)
display: table-cell;
Text-align:center;
Vertical-align:center;
Самому div
Display: inline-block
align-self: center
Дальше независимо от родителя он всегда будет в центре.
*Крики боли*
Словил флешбеки о тех временах, когда приходилось касаться фронтенда и html + css. Flexbox ещё не изобрели.