вертикальная центровка css - PullRequest
Новая
       17

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

24 голосов
/ 09 февраля 2009

Как я могу вертикально центрировать <div> в пределах <div>?

мой код до сих пор: 

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

я пробовал "top: 50%;" и "вертикальное выравнивание: середина"; без успеха

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

РЕДАКТИРОВАТЬ: внутренний div не имеет фиксированной высоты

Ответы [ 10 ]

33 голосов
/ 09 февраля 2009

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

Эта антистоловая истерия - всего лишь нелепость.

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

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

CSS - невероятно полезный инструмент, но он также имеет некоторые довольно серьезные ограничения. Мои любимые нумерованные списки могут отображаться только как «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 . Для достижения аналогичной цели они используют три вложенных делителя с относительным + абсолютным + относительным позиционированием , чтобы получить вертикальное центрирование . Извините, но тот, кто написал это - и тот, кто считает это хорошей смертью - просто потерял заговор.

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

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

9 голосов
/ 09 февраля 2009

Это нетривиально, могут быть предостережения, и это не то, что 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>
7 голосов
/ 09 марта 2013

Мне нравится это решение лучше всего. Это для 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>
5 голосов
/ 09 февраля 2009

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

Нечто подобное для вашего внутреннего дел. 

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

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

2 голосов
/ 09 февраля 2009 
<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>

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

1 голос
/ 19 октября 2014

Две техники многих

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

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

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

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

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

Может также применяться к внутреннему 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>

# 2 - Flexbox

Совместимость: IE 11. Информацию о поддержке других браузеров см. Здесь .

Использование Flexbox и гибких vw и vh длин 

body {
  margin: 0;
}

.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.inner {
  width: 50vw;
  height: 50vh;
  background: #ff8f00;
}
<div class="outer">
  <div class="inner">

  </div>
</div>
0 голосов
/ 25 июня 2016

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

0 голосов
/ 15 мая 2014

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

* 1003 Е.Г. * 

<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's inner height and width were less than the parent's height and width.
    </div>
</div>

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

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

0 голосов
/ 09 февраля 2009

Вам абсолютно необходимо сделать это с помощью 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 );
0 голосов
/ 09 февраля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...