Выравниваем блок по центру страницы

[@Xazzzi]

Забавные способы, но можно и проще, используя calc и единицы vh/vw.

[@vintage]

Если уж и использовать современные фичи, то с flexbox это делается куда проще. А главное — результат получится гораздо гибче.

[@SerDIDG]

IE9…

[@vintage]

Ну а для IE9 костыль jsfiddle.net/zzmm8481/

[@SerDIDG]

Этот вариант не решает проблемы, когда нужен скролл у родителя, если блок больше его.

[@vintage]

И про это есть порно костыль jsfiddle.net/zzmm8481/3/

[@SerDIDG]

Ну так для чего это всё, если можно взять просто 4й вариант )

[@vintage]

Чтобы не терять размер шрифта при каждом центрировании блока.

[@SerDIDG]

Вы можете не ставить font-size: 0, он нужен для того, чтобы убрать пробел между родителем и блоком, допущенный при форматировании кода. Можно сделать вёрстку без пробела, либо убрать его другим способом. jsfiddle.net/serdidg/nfqg9rza/29/

[@homm]

font-size: 0 — самое плохое, что тут можно придумать. Верстка без пробела лучше, но не очень удобно. Самый приятный вариант, на мой взгляд — закоментировать пробелы:

<div class="parent"><!--
 --><div class="block">
        <img src="http://habrastorage.org/files/50f/7b2/1cc/" alt=""/>
    </div>
</div>

[@SerDIDG]

Где-то даже был спор как у инлайновых элементов лучше убирать отступ. Так что я не буду рекомендовать вообще ничего по этому поводу. Пусть каждый делает как ему больше нравится. ) Ваш вариант приму на заметку.

ПС. На больших проектах не использую наследования шрифтов, так что не испытываю проблем с font-size: 0. Всё разбито на модули, стили шрифтов в миксинах и тд.

[@homm]

В теории font-size: 0 вообще не должен работать, потому что у каждого браузера есть настройка, минимального размера шрифта. Но видимо этот хак настолько распространен, что разработчикам движков пришлось сделать ноль специальным случаем.

[@dannyzubarev]

Есть еще CSS3 метод в три строки:
.v-align {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}

Устанавливаем позиционирование относитель родительского элемента, устанавливаем положение посередине (50%) и затем translateY (2D преобразование) поднимает элемент на 50% от высоты оного вверх.

И, чтобы избежать размытия из-за расположения на «half-pixel», родительскому элементу устанавливаем параметр сохранения размеров: .parent { transform-style: preserve-3d; }

[@SerDIDG]

А как потом считать координаты внутри такого блока, например drag'n'drop и тд? На них ведь сдвиг не влияет?

[@dannyzubarev]

Верно, при анимации может быть размытие. Но мы же не собираемся анимировать то, как мы центрируем блок? Это же «хак». :)

[@dannyzubarev]

Хм, я понял что вы имеете ввиду. Если не сложно, то не могли бы поделиться более подробной информацией насчет этого бага? Буду премного благодарен.

Я вот попытался воспроизвести описанную вами проблему (в меру своего понимания оной) и у меня все вроде бы ок — jsfiddle.net/nick_v6/d05deaw9/1/

[@SerDIDG]

Да, можно. Мне просто не нравится вариант с эмуляцией таблицы в принцыпе.

[@SerDIDG]

Дополнил статью примером.

[@SerDIDG]

Кому как. Из варианта 4 делается отличный миксин, и применяет по всему проекту если нужно. А таблица требует уже нужное количество нодов. К тому же часто нужно сделать вот так — jsfiddle.net/serdidg/nfqg9rza/3/, когда картинка масштабируется при уменьшении родительского блока.

[@BaNru]

А какого из вышепредставленных способов ещё не было на Хабре?
(про интернет (рунет) даже спрашивать стесняюсь)
habrahabr.ru/sandbox/62257/
habrahabr.ru/post/189696/
habrahabr.ru/post/73113/
habrahabr.ru/post/71236/

[@SerDIDG]

Варианта #4, больше всего на него похож habrahabr.ru/sandbox/62257/, вот только не задача, он абсолютно не ищется по поиску.

[@BaNru]

Странно, а я именно в поисковике (в гугле) нашел (скрин).

Перефразирую вопрос: Зачем плодить то, чего уже 100500 раз писалось в сети и даже на текущем ресурсе? Вот описал бы варианты из комментариев про flex, calc или transfrom, их вроде не было на Хабре.

[@SergeyKuzmich]

Представленный вариант семантически лучше и правильнее, чем пример из песочницы.

Плюс, здесь как-никак разжеваны стили в общих чертах, а не как в примере из песочницы: «Используем эти стили xxx:yyy.», а затем: «Та да! Магия!»
Скажете, что знающий человек разберется — полностью соглашусь, но такие пояснения в двух словах лишними не будут.

[@BaNru]

Поэтому надо писать целую статью дублей, вместо простого коммита в комментариях?

[@SergeyKuzmich]

Если рассматривать отдельно 4й вариант, то статья, увы, в песочнице и там нет комментариев, чтобы довести решение до ума.
Варианты 1, 2, 3 добавлены для сравнения, как я понимаю.

Я фанат дублей, но порой обсуждение тех или иных вопросов в старых статьях затухает на неопределенных моментах, а подобные дубли возобновляют обсуждение вопросов с учетом новых появившихся технологий и подходов.

[@BaNru]

Сорри, про комменты ступил.

В остально несогласен в данном контексте, но холиварить думаю не стоит дальше.
И так в оффтоп длинный.

[@GruZZ]

css-tricks.com/centering-css-complete-guide/ — вот этой ссылки должно хватит всем. Если нет, шлите Крису PR.

[@SergeyKuzmich]

Думаю, будет недостаточно.
Вот обсуждение примера такого же как на css-tricks (3 вариант с неизвестными размерами) и его последствия.

[@GruZZ]

На css-tricks в комментариях тоже упоминается данная проблема, и есть ссылка на возможное решение: zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/.

[@SerDIDG]

И вот что будет, если по такому принципу сделано диалоговое окно, в котором, например, есть кастомные селекты или дейтпикеры. screencloud.net/v/cp6P

[@GreatRash]

htmlforum.ru/index.php?showtopic=28411

[@ArtyV]

Добро пожаловать в интернет.

[@walkman7]

Думал будет что то новое, но и не все старое есть.

[@azproduction]

Самый badass способ :)

<button>
    <h1 contenteditable>Pewpew</h1>
</button>

jsfiddle.net/m8kr4o8w/

[@SerDIDG]

И даже со скроллом )
jsfiddle.net/serdidg/m8kr4o8w/1/

[@Zardos]

оффтоп:
Вот от этого «Минусом данного способ есть ...» плачу кровью. Есть можно руками или ложкой, но не минусом.

[@SerDIDG]

Но ведь всегда можно воспользоваться личкой, если конечно смысл не показать своё превосходство в знании языка, который для меня является иностранным.

[@Zardos]

ок, учту

[@khusamov]

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя. Пример: jsfiddle.net/serdidg/nfqg9rza/3/.

Странный пример. Во-первых, там картинка не больше родителя (width: auto; max-width: 100%;). Во-вторых, там почему-то у родителя стоит position: absolute; в итоге он на реальной странице оказывается наверху, а не там где надо.

И самое печальное, попытался сделать чтобы картинка была больше родителя, но выравнять по центру не удалось. Она выравнивается по левому краю.

Можно этот пример подправить? Чтобы посмотреть, как выравниваться, если картинка больше родителя? Например при условии, что родитель будет обрезать картинку.

[@SerDIDG]

Странный пример. Во-первых, там картинка не больше родителя (width: auto; max-width: 100%;).

Можно уменьшить область просмотра, чтобы увидеть эффект. Начальное состояние — screencloud.net/v/7F6u, уменьшенное — screencloud.net/v/h7Wz. Обновил статью и добавил ещё пример с большой картинкой — jsfiddle.net/serdidg/nfqg9rza/386.

Во-вторых, там почему-то у родителя стоит position: absolute; в итоге он на реальной странице оказывается наверху, а не там где надо.

Да, примеры сделаны не для начинающих. Если нужно на всю страницу растягивать — нужно ставить min-height: 100% на body, либо position: fixed на контейнер выравниваемого блока, тогда родитель будет занимать только область окна, а не страницы.

И самое печальное, попытался сделать чтобы картинка была больше родителя, но выравнять по центру не удалось. Она выравнивается по левому краю.

Если использовать стили с этого примера, любые прописанные размеры в стилях / аттрибутах для картинки могут лишить её правильных пропорций при масштабировании родителя — jsfiddle.net/serdidg/nfqg9rza/387, попробуйте окошко просмотра уменьшить по высоте и поймёте о чём я.

Можно этот пример подправить? Чтобы посмотреть, как выравниваться, если картинка больше родителя? Например при условии, что родитель будет обрезать картинку.

Сделал другой пример — jsfiddle.net/serdidg/nfqg9rza/386, родитель в данном примере картинку не обрезает, картинка будет пропорционально масштабироваться. А с обрезаниями, это уже совсем другая история, где используется object-fit: cover и тд.

[@SerDIDG]

Живой пример использования — serdidg.github.io/MagpieUI/docs/content/components/GalleryPopup.html#examples

[@khusamov]

Спасибо за ответ! Буду думать, как сделать не 100%, а больше и чтобы оно обрезалось родителем.

[@Draku1a]

а так не проще ли:

<div id='loading' style='width: 100%; height: 100%;'>
  <div style='width: 100px; height: 40px; overflow:visible; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-20px; text-align: center;'>
    <img src='load.gif' width='100px' height='100px'><br />Загрузка...
  </div>
</div>

Источник: bashev.ru/articles/vyravnivaem_blok_div_po_centru_ekrana

[@SerDIDG]

А вы статью читали? Там описан такой метод (Вариант 1), и почему он не подходит в ряде ситуаций, так как предполагает статически заданные размеры.