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

homm 29 сен 2014 в 15:03

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

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

SerDIDG 29 сен 2014 в 15:20

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

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

homm 29 сен 2014 в 17:34

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

dannyzubarev 29 сен 2014 в 00:36

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

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

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

SerDIDG 29 сен 2014 в 00:39

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

НЛО прилетело и опубликовало эту надпись здесь

dannyzubarev 29 сен 2014 в 14:19

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

НЛО прилетело и опубликовало эту надпись здесь

dannyzubarev 30 сен 2014 в 15:52

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

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

НЛО прилетело и опубликовало эту надпись здесь

SerDIDG 29 сен 2014 в 03:05

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

SerDIDG 29 сен 2014 в 03:10

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

НЛО прилетело и опубликовало эту надпись здесь

SerDIDG 29 сен 2014 в 03:20

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

BaNru 29 сен 2014 в 05:30

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

SerDIDG 29 сен 2014 в 06:18

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

BaNru 29 сен 2014 в 06:28

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

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

SergeyKuzmich 29 сен 2014 в 10:18

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

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

BaNru 29 сен 2014 в 10:20

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

SergeyKuzmich 29 сен 2014 в 13:14

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

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

BaNru 29 сен 2014 в 13:57

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

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

GruZZ 29 сен 2014 в 08:21

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

SergeyKuzmich 29 сен 2014 в 10:22

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

GruZZ 29 сен 2014 в 10:32

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

SerDIDG 29 сен 2014 в 14:03

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

GreatRash 29 сен 2014 в 10:55

htmlforum.ru/index.php?showtopic=28411

ArtyV 29 сен 2014 в 11:15

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

walkman7 29 сен 2014 в 12:41

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

azproduction 29 сен 2014 в 14:10

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

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

jsfiddle.net/m8kr4o8w/

SerDIDG 29 сен 2014 в 14:14

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

Zardos 29 сен 2014 в 17:18

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

SerDIDG 29 сен 2014 в 17:38

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

Zardos 30 сен 2014 в 12:08

ок, учту

khusamov 18 окт 2015 в 21:02

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

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

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

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

SerDIDG 19 окт 2015 в 00:32

Странный пример. Во-первых, там картинка не больше родителя (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 19 окт 2015 в 00:38

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

khusamov 19 окт 2015 в 11:55

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

Draku1a 30 дек 2015 в 08:15

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

<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 30 дек 2015 в 19:40

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий