вертикальное центрирование css

как я мог бы вертикально

внутри

?

мой код:

 

я пробовал «топ: 50%»; и “vertical-align: middle;” безуспешно

EDIT: хорошо, так что это обсуждалось много. и я, возможно, начал еще одну мини-пламенную войну. но ради аргумента, как бы я это сделал с таблицей? Я использовал css для всего остального, так что это не так, как будто я не пытаюсь использовать «хорошие практики».

EDIT: внутренний div не имеет фиксированной высоты

Короче, вы набиты. Еще об этом в недавнем вопросе, который я задал. Можете ли вы сделать эту компоновку HTML без использования таблиц? В принципе, фанатики CSS должны получить контроль и понять, что есть просто некоторые вещи, которые вы не можете сделать (или не можете делать хорошо) без таблиц.

Эта антистоловая истерия – не что иное, как смехотворное.

Ячейки таблицы отлично справляются с вертикальной центрировкой и совместимы с обратной связью, насколько это возможно. Они также обрабатывают бок о бок контент лучше, чем плавающие, относительное / абсолютное позиционирование или любые другие методы типа CSS.

Джоэл придумал (или, по крайней мере, популяризировал) термин «архитектор-астронавты» в книге « Не позволяйте архитекторам космонавтов пугать вас» . Ну, в том же духе я думаю, что термин «астронавт CSS» (или «CSS Space Cadet») одинаково уместен.

CSS – невероятно полезный инструмент, но он также имеет некоторые довольно серьезные ограничения. Мои любимые пронумерованные списки ishow могут отображаться только как «3.» но не «3») или «(3)» (по крайней мере, до создания CSS3-контента – или это CSS2.1? В любом случае это не широко поддерживается). Какой надзор.

Но больше, чем вертикальное центрирование и бок о бок. Эти две области по-прежнему представляют собой огромную проблему для чистого CSS. Другой плакат решил, что относительное позиционирование в сочетании с отрицательной высотой поля – это путь. Как это лучше, чем:

   Layout    
Inner

который будет работать везде, каждый раз.

Вот статья о вертикальном центрировании в CSS . Для достижения аналогичной цели они используют три вложенных div с относительным + абсолютным + относительным позиционированием, чтобы получить вертикальное центрирование . Извините, но тот, кто написал это, и любой, кто считает, что это хорошая смерть, просто потерял сюжет.

Контраргумент приведен в таблицах и CSS: CSS Trolls отступают . Доказательство действительно находится в пудинге. Подавляющее большинство из 20 лучших сайтов (Alexa) по-прежнему используют таблицы для макета. Не без оснований.

Поэтому решите для себя: вы хотите, чтобы ваш сайт работал и тратил меньше времени на то, чтобы заставить его работать? Или вы хотите стать астронавтом?

Это нетривиально, могут быть оговорки, и это не то, что CSS хорошо обрабатывает на этом этапе.

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

Что бы вы ни делали, пожалуйста, не отступайте к столам.


Редактировать: это смешно, следующее работает отлично в строгом документе, не прибегая к табличной разметке:

   
Any text any height

Мне нравится это решение лучше всего. Это для IE8 +, и это легко понять.

  
Centered Content

верх: 50%; должно сработать. вам нужно поместить margin-top в отрицательную половину высоты или начать в середине. Поэтому вам нужна высота внутреннего div. Вам также, вероятно, нужна позиция: relative;

Что-то вроде этого для вас внутренний div.

 position:relative; top: 50%; height:80px; margin-top: -40px; /*set to a negative number 1/2 of your height*/ 

Не очень аккуратная работа с отрицательными размерами (что это даже означает?), Но, возможно, самый простой способ.

 
vertically centered

больше информации

Два метода многих

Совместимость с браузером приведена ниже в IE. Современные браузеры не должны справляться с этими проблемами.

# 1 – Абсолютная и автоматическая маржа

Совместимость: IE 8 +

  • Комбинация верхнего, правого, нижнего, левого и правого margin: auto центрирует div по вертикали и по горизонтали.

  • Ширина и высота необходимы, но могут быть процентами

Может также применяться к внутреннему div с родительской установкой position: relative

Примечание: max-width и max-height вместо процентной высоты возможны IE 9 +. Для IE 8 требуется height .

 html, body { height: 100%; } .outer { background: #ff8f00; height: 50%; width: 50%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 
 

Вам нужно делать это с помощью css? Вышеупомянутая ссылка выглядит довольно неплохо, но вы можете получить результат с помощью javasctipt / jquery – определить высоту основного div и отрегулировать margin.padding соответственно. Нечто похожее на: (jquery)

 var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2; $('the-inner-div').css( "margin-top" , gap ); 

Таблица не нужна, если вы хотите использовать модель дисплея flexbox.

Например

 
This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.

Если вы хотите, чтобы вертикальное центрирование использовало правило «margin: auto 0;» в дочернем div.

ps Вам нужно будет префикс использования flexbox, если вы хотите совместимость между браузерами (например, «display: -webkit-flexbox;»)

Свойство display: flex особенно хорошо подходит для центрирования, как по вертикали, так и по горизонтали. Для вертикального центрирования добавьте display: flex свойств display: flex и justify-content: center в контейнер.

Попробуйте линейную высоту

  • Изменение цвета по умолчанию Firefox при открытии ссылок на новой вкладке
  • Как поместить 3 divs бок о бок с помощью CSS?
  • Запросы СМИ не ведут себя так, как ожидалось на Android
  • Что означают запятые и пробелы в нескольких classах в CSS?
  • Как переопределить свойства classа CSS с помощью другого classа CSS
  • Отключить антиализацию при масштабировании изображений
  • nth-of-type vs nth-child
  • Как действительно изолировать таблицы стилей в расширении Google Chrome?
  • jQuery: height () / width () и "display: none"
  • Линия до и после названия над изображением
  • Прозрачность CSS3 + gradleиент
  • Давайте будем гением компьютера.