Каков наилучший способ вертикального центрирования содержимого div, когда высота содержимого является переменной. В моем конкретном случае высота контейнера контейнера фиксирована, но было бы здорово, если бы было решение, которое работало бы в тех случаях, когда контейнер также имеет переменную высоту. Кроме того, я хотел бы, чтобы решение не использовало или очень мало использовало CSS-хаки и / или несемантическую разметку.
css
vertical-alignment
jessegavin
источник
источник
Ответы:
Просто добавь
к внутреннему div.
Он перемещает верхнюю границу внутреннего div на половину высоты внешнего div (
top: 50%;
), а затем внутренний div на половину его высоты (transform: translateY(-50%)
). Это будет работать сposition: absolute
илиrelative
.Имейте в виду, что
transform
иtranslate
иметь префиксы поставщиков, которые не включены для простоты.Codepen: http://codepen.io/anon/pen/ZYprdb
источник
transform
связанных вещей имеют-webkit-
префикс, и теперь это работает. Так же, как напоминание: не забудьте также добавить-webkit-
префикс.position: absolute
, не так ли?translate
будет рендерить все размыто, поскольку она пытается обработать высоту .5px на всем.Похоже, это лучшее решение, которое я нашел для этой проблемы, если ваш браузер поддерживает
::before
псевдоэлемент: CSS-хитрости: центрирование в неизвестном .Не требует дополнительной разметки и, кажется, работает очень хорошо. Я не мог использовать
display: table
метод, потому чтоtable
элементы не подчиняютсяmax-height
свойству.источник
.block { white-space: nowrap; font-size: 0; line-height: 0; }
и оставить отрицательное правое поле для псевдоэлемента, вам просто нужно сбросить fs и lh на .centered ... вот так вы убедитесь, что элемент будет правильно расположен, даже если он шире, чем область просмотра (и не не нужно использовать IMO немного грязный отрицательный запас).Это то, что мне нужно было сделать много раз, и последовательное решение все еще требует, чтобы вы добавили небольшую несемантическую разметку и некоторые браузерные хаки. Когда мы получим поддержку браузера для CSS 3, вы получите вертикальное центрирование без греха.
Для лучшего объяснения этой техники вы можете посмотреть статью, из которой я ее адаптировал , но в основном она включает добавление дополнительного элемента и применение различных стилей в IE и браузерах, которые поддерживают
position:table\table-cell
элементы, не относящиеся к таблице.Есть много способов (хаков) применять стили в определенных наборах браузеров. Я использовал условные комментарии, но посмотрите на статью, приведенную выше, чтобы увидеть два других метода.
Примечание. Существуют простые способы получить вертикальное центрирование, если вы заранее знаете некоторые высоты, если вы пытаетесь центрировать одну строку текста или в некоторых других случаях. Если у вас есть больше деталей, добавьте их, потому что может быть метод, который не требует взлома браузера или несемантической разметки.
Обновление: мы начинаем улучшать браузерную поддержку CSS3, предлагая как flex-box, так и transforms в качестве альтернативных методов для получения вертикального центрирования (среди прочих эффектов). Смотрите этот другой вопрос для получения дополнительной информации о современных методах, но имейте в виду, что поддержка браузеров все еще отрывочна для CSS3.
источник
Используя дочерний селектор, я взял невероятный ответ Фади выше и свел его к одному правилу CSS, которое я могу применить. Теперь все, что мне нужно сделать, это добавить
contentCentered
имя класса к элементам, которые я хочу центрировать:Разветвленный CodePen: http://codepen.io/dougli/pen/Eeysg
источник
*
селектор будет работать хуже, чем принятый ответ. Не может быть проблемой, но стоит отметить. stevesouders.com/blog/2009/06/18/simplifying-css-selectors> div
вместо этого. calendar.perfplanet.com/2011/…Лучший результат для меня пока:
div для центрирования:
источник
Вы можете использовать маржу авто. С flex, div, кажется, тоже центрирован вертикально.
источник
Для меня лучший способ сделать это:
Преимущество не в том, чтобы явно указывать высоту
источник
Это мое отличное решение для
div
динамического (в процентах) роста.CSS
HTML
Попробуйте сами.
источник
Вы можете использовать гибкий дисплей, такой как код ниже:
источник