Соул mitStrip.com / commitstrip :: css :: профессиональный юмор :: Смешные комиксы (веб-комиксы с юмором и их переводы)

потому что "я w3c, я не хочу ничего решать, я хочу скругленные уголочки"

Стандарты и браузеры пишут люди, очень далекие от простых бизнесов, обывателей, журналистов и художников. Они воспринимают веб как нечто газетное - где не должно быть абсолютно расположенных элементов. Все элементы с их точки зрения должны идти один за других, в потоке. Ну и веб с их точки зрения это не игрушка, где можно играть с шрифтами и центрировать блоки.

Еще один суицид :D
Ниже дважды говорили про flex, и дважды ответили что эта хуета не держит в IE9-10-11, а polyfill на js еще и требует прописывать flex атрибуты в html, Карл. Так что ты все равно будешь верстать на display table и table-cell, если хочешь дать заказчику семантически чистый html и кроссбраузерный css, и чтобы без полифилов под IE11, ибо это тоже современный браузер, хоть и говно. Ну а иначе ты просто кодер-верстак, который верстает хуяк хуяк и в продакшн, обмазанный кучей полифилов, data-font-size в атрибутах и прочих стилях прямо в html.

Когда-то то же говорили про Flash...

Хорошее предположение! Но... немного наивное. Извини.

А относительно чего мы его выровняем? Да и нет у нас по сути лишних элементов. Если речь о выравнивании по высоте, то это означает что высота внешнего (родительского блока, рамки) уже задана, то есть не зависит от контента.
Вот вам несколько способов, вечер интересных историй начался, поехали:
1) Попробуем сделать line-height во всю высоту блока, и таки поставим внутри vertical-align: middle. А блок внутри сделаем inline-block.
line-height - ширина строки с буквами, vertical-align - выравнивание по середине строки с буквами, inline-block говори вести себя элементу как слову или букве, то есть быть в линию.
2) Самый здравый. display: absolute; top: 50%; transform: translateY(-50%);
позиционирование - абсолютное. В этом случае внешний блок не может брать размеры от контента (высота и так не от контента, помните?) - но, прощай автоматическая ширина, теперь мы должны задавать ширину родителю явно. top 50% - сдвигает контент до середины, выглядит так, что первая половина квадрата пустая, а во второй половине наш контент, начинающийся ровно от середины. Не совсем то что мы хотели, но на то он и top, чтобы работать относительно размера родителя. Дальше transform translateY - вот эта магия уже как раз двигает относительно своих размеров контента, и мы сдвигаем его на половину вверх от самого себя. И вуаля, все выглядит как надо.
3) Родителю - display: table-cell. Хардкор, теперь родительский блок как будто бы ячейка таблицы. Этому же родителю добавляем vertical-align: middle. И он выравнивает контент по вертикали, да и еще ширину может сам от контента брать. Мой любимый способ после способа 2.
4) Популярный способ в нулевых. Надо добавить еще один блок вокруг всего нашего блока. У нас будет Блок A, в нем блок B, а в нем контент C. Блоку A говорим top 50%, а контенту говорим top: -50%. Причем высоту надо задать A, а блок B должен взять высоту относительно контента, тогда top: -50% внутри него сработает аля transform. Ну понимаете, когда transform еще не было..
5) Суперхак. контенту делаем position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
WAT говорит браузер, ты хочешь чтобы элемент был впритык ко всем краям, но говоришь что margin (отступы) должны быть автоматическими.. пожалуй я сам рассчитаю ему одинаковые отступы со всех сторон, чтобы блок был по центру. Бинго, браузер, я тебя наебал. Опять же, absolute, внешний блок не может взять ширину от контента, и ее надо ставить самому.
Это способы, когда мы ничего не знаем заранее о высоте контента (читай, она может быть любая). Если же высота контента заранее известна, количество способов резко вырастает, а их оригинальность коррелирует с количеством. В этом случае вход могут пойти заранее рассчитанные координаты left и top, игры с отрицательными отступами margin (а подвинем мы контент на margin: -50px, он ведь 100px, по центру и встанет) и т.д. и т.п.
Спасибо за внимание, уебищные представления окончены. Надеюсь вы пожалели время и средства.