Pull to refresh

Comments 49

Забавные способы, но можно и проще, используя calc и единицы vh/vw.
Если уж и использовать современные фичи, то с flexbox это делается куда проще. А главное — результат получится гораздо гибче.
Этот вариант не решает проблемы, когда нужен скролл у родителя, если блок больше его.
Ну так для чего это всё, если можно взять просто 4й вариант )
Чтобы не терять размер шрифта при каждом центрировании блока.
Вы можете не ставить font-size: 0, он нужен для того, чтобы убрать пробел между родителем и блоком, допущенный при форматировании кода. Можно сделать вёрстку без пробела, либо убрать его другим способом. jsfiddle.net/serdidg/nfqg9rza/29/
font-size: 0 — самое плохое, что тут можно придумать. Верстка без пробела лучше, но не очень удобно. Самый приятный вариант, на мой взгляд — закоментировать пробелы:

<div class="parent"><!--
 --><div class="block">
        <img src="http://habrastorage.org/files/50f/7b2/1cc/" alt=""/>
    </div>
</div>
Где-то даже был спор как у инлайновых элементов лучше убирать отступ. Так что я не буду рекомендовать вообще ничего по этому поводу. Пусть каждый делает как ему больше нравится. ) Ваш вариант приму на заметку.

ПС. На больших проектах не использую наследования шрифтов, так что не испытываю проблем с font-size: 0. Всё разбито на модули, стили шрифтов в миксинах и тд.
В теории font-size: 0 вообще не должен работать, потому что у каждого браузера есть настройка, минимального размера шрифта. Но видимо этот хак настолько распространен, что разработчикам движков пришлось сделать ноль специальным случаем.
Есть еще CSS3 метод в три строки:
.v-align {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}

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

И, чтобы избежать размытия из-за расположения на «half-pixel», родительскому элементу устанавливаем параметр сохранения размеров: .parent { transform-style: preserve-3d; }
А как потом считать координаты внутри такого блока, например drag'n'drop и тд? На них ведь сдвиг не влияет?
UFO landed and left these words here
Верно, при анимации может быть размытие. Но мы же не собираемся анимировать то, как мы центрируем блок? Это же «хак». :)
UFO landed and left these words here
Хм, я понял что вы имеете ввиду. Если не сложно, то не могли бы поделиться более подробной информацией насчет этого бага? Буду премного благодарен.

Я вот попытался воспроизвести описанную вами проблему (в меру своего понимания оной) и у меня все вроде бы ок — jsfiddle.net/nick_v6/d05deaw9/1/
UFO landed and left these words here
UFO landed and left these words here
Да, можно. Мне просто не нравится вариант с эмуляцией таблицы в принцыпе.
UFO landed and left these words here
Кому как. Из варианта 4 делается отличный миксин, и применяет по всему проекту если нужно. А таблица требует уже нужное количество нодов. К тому же часто нужно сделать вот так — jsfiddle.net/serdidg/nfqg9rza/3/, когда картинка масштабируется при уменьшении родительского блока.
Странно, а я именно в поисковике (в гугле) нашел (скрин).

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

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

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

В остально несогласен в данном контексте, но холиварить думаю не стоит дальше.
И так в оффтоп длинный.
Думаю, будет недостаточно.
Вот обсуждение примера такого же как на css-tricks (3 вариант с неизвестными размерами) и его последствия.
И вот что будет, если по такому принципу сделано диалоговое окно, в котором, например, есть кастомные селекты или дейтпикеры. screencloud.net/v/cp6P
Думал будет что то новое, но и не все старое есть.
оффтоп:
Вот от этого «Минусом данного способ есть ...» плачу кровью. Есть можно руками или ложкой, но не минусом.
Но ведь всегда можно воспользоваться личкой, если конечно смысл не показать своё превосходство в знании языка, который для меня является иностранным.
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя. Пример: jsfiddle.net/serdidg/nfqg9rza/3/.

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

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

Можно этот пример подправить? Чтобы посмотреть, как выравниваться, если картинка больше родителя? Например при условии, что родитель будет обрезать картинку.
Странный пример. Во-первых, там картинка не больше родителя (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 и тд.
Спасибо за ответ! Буду думать, как сделать не 100%, а больше и чтобы оно обрезалось родителем.
а так не проще ли:
<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
А вы статью читали? Там описан такой метод (Вариант 1), и почему он не подходит в ряде ситуаций, так как предполагает статически заданные размеры.
Only those users with full accounts are able to leave comments. Log in, please.