How to become an author
Search
Write a publication
Pull to refresh

Comments 49

Забавные способы, но можно и проще, используя calc и единицы vh/vw.
Total votes 2: ↑1 and ↓10
Если уж и использовать современные фичи, то с flexbox это делается куда проще. А главное — результат получится гораздо гибче.
Total votes 5: ↑5 and ↓0+5
Этот вариант не решает проблемы, когда нужен скролл у родителя, если блок больше его.
Total votes 1: ↑1 and ↓0+1
Чтобы не терять размер шрифта при каждом центрировании блока.
This comment wasn’t rated yet0
Вы можете не ставить font-size: 0, он нужен для того, чтобы убрать пробел между родителем и блоком, допущенный при форматировании кода. Можно сделать вёрстку без пробела, либо убрать его другим способом. jsfiddle.net/serdidg/nfqg9rza/29/
This comment wasn’t rated yet0
font-size: 0 — самое плохое, что тут можно придумать. Верстка без пробела лучше, но не очень удобно. Самый приятный вариант, на мой взгляд — закоментировать пробелы:

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

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

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

И, чтобы избежать размытия из-за расположения на «half-pixel», родительскому элементу устанавливаем параметр сохранения размеров: .parent { transform-style: preserve-3d; }
Total votes 10: ↑10 and ↓0+10
А как потом считать координаты внутри такого блока, например drag'n'drop и тд? На них ведь сдвиг не влияет?
Total votes 4: ↑4 and ↓0+4
UFO just landed and posted this here
Верно, при анимации может быть размытие. Но мы же не собираемся анимировать то, как мы центрируем блок? Это же «хак». :)
This comment wasn’t rated yet0
UFO just landed and posted this here
Хм, я понял что вы имеете ввиду. Если не сложно, то не могли бы поделиться более подробной информацией насчет этого бага? Буду премного благодарен.

Я вот попытался воспроизвести описанную вами проблему (в меру своего понимания оной) и у меня все вроде бы ок — jsfiddle.net/nick_v6/d05deaw9/1/
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
Да, можно. Мне просто не нравится вариант с эмуляцией таблицы в принцыпе.
Total votes 5: ↑4 and ↓1+3
Дополнил статью примером.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
Кому как. Из варианта 4 делается отличный миксин, и применяет по всему проекту если нужно. А таблица требует уже нужное количество нодов. К тому же часто нужно сделать вот так — jsfiddle.net/serdidg/nfqg9rza/3/, когда картинка масштабируется при уменьшении родительского блока.
Total votes 1: ↑1 and ↓0+1
Варианта #4, больше всего на него похож habrahabr.ru/sandbox/62257/, вот только не задача, он абсолютно не ищется по поиску.
Total votes 4: ↑2 and ↓20
Странно, а я именно в поисковике (в гугле) нашел (скрин).

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

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

Я фанат дублей, но порой обсуждение тех или иных вопросов в старых статьях затухает на неопределенных моментах, а подобные дубли возобновляют обсуждение вопросов с учетом новых появившихся технологий и подходов.
Total votes 2: ↑2 and ↓0+2
Сорри, про комменты ступил.

В остально несогласен в данном контексте, но холиварить думаю не стоит дальше.
И так в оффтоп длинный.
This comment wasn’t rated yet0
Думаю, будет недостаточно.
Вот обсуждение примера такого же как на css-tricks (3 вариант с неизвестными размерами) и его последствия.
Total votes 1: ↑1 and ↓0+1
И вот что будет, если по такому принципу сделано диалоговое окно, в котором, например, есть кастомные селекты или дейтпикеры. screencloud.net/v/cp6P
This comment wasn’t rated yet0
Думал будет что то новое, но и не все старое есть.
Total votes 1: ↑1 and ↓0+1
оффтоп:
Вот от этого «Минусом данного способ есть ...» плачу кровью. Есть можно руками или ложкой, но не минусом.
Total votes 4: ↑1 and ↓3-2
Но ведь всегда можно воспользоваться личкой, если конечно смысл не показать своё превосходство в знании языка, который для меня является иностранным.
Total votes 1: ↑1 and ↓0+1
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя. Пример: jsfiddle.net/serdidg/nfqg9rza/3/.

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

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

Можно этот пример подправить? Чтобы посмотреть, как выравниваться, если картинка больше родителя? Например при условии, что родитель будет обрезать картинку.
This comment wasn’t rated yet0
Странный пример. Во-первых, там картинка не больше родителя (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 и тд.
This comment wasn’t rated yet0
Спасибо за ответ! Буду думать, как сделать не 100%, а больше и чтобы оно обрезалось родителем.
This comment wasn’t rated yet0
а так не проще ли:
<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
Total votes 1: ↑0 and ↓1-1
А вы статью читали? Там описан такой метод (Вариант 1), и почему он не подходит в ряде ситуаций, так как предполагает статически заданные размеры.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time
Change theme settings

Your account

Sections

Information

Services

Support
© 2006–2024, Habr