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

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

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

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

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

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

       
 
 
 
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 в контейнер.

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