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

как бы вертикально центрировать a <div> в пределах <div>?

мой код:

<div style="height:322px;overflow:auto;">
    <div style="border: Solid 1px #999999;padding:5px;">
    </div>
</div>

Я попробовал "top: 50%;" и "vertical-align: middle;" без успеха

РЕДАКТИРОВАТЬ: в порядке, поэтому он обсуждался много. и я, возможно, начал еще одну мини-пламенную войну. но ради аргумента, как бы я это сделал с таблицей? Я использовал css для всего остального, так что мне не нравится, что я не пытаюсь использовать "хорошие практики".

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

Ответы

Ответ 1

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

Эта антистатистическая истерия - не что иное, как смешная.

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

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

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

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

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
    #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }
  </style>
</head>
<body>
<table>
<tr>
<td id="outer">
  <div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

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

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

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

Итак, решите сами: хотите ли вы, чтобы ваш сайт работал и тратил меньше времени на то, чтобы заставить его работать? Или вы хотите стать астронавтом CSS?

Ответ 2

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

Однако широко обсуждаются и googleable. Это хороший пример.

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

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

<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}

.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}

.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->

<div class="outer">
    <div class="middle">
        <div class="inner">
          Any text any height
        </div>
    </div>
</div>

Ответ 3

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

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

Ответ 4

верх: 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*/

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

Ответ 5

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
    vertically centered
    </div>
  </div>
</div>

more информация

Ответ 6

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

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

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

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

  • Сочетание верхних, правых, нижних, левых и margin: auto центрирует div по вертикали и по горизонтали.

  • Требуется ширина и высота, но может быть процентами

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

Примечание: A 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;
}
<div class="outer"></div>

Ответ 7

Вам нужно делать это с помощью 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 );

Ответ 8

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

например.

<div style="height: 322px; width: 200px; display: flex; background: gray;">
    <div style="border: Solid 1px #999999; padding:5px; margin: auto;">
      This text would be both vertically AND horizontally centered, if it inner height and width were less than the parent height and width.
    </div>
</div>

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

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

Ответ 9

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

Ответ 10

Попробуйте высоту строки