Подтвердить что ты не робот

CSS: отзывчивый способ центрировать жидкий div (без ширины пикселей), ограничивая максимальную ширину?

Я видел миллион вопросов о том, как центрировать элемент блока, и, похоже, есть несколько популярных способов сделать это, но все они полагаются на фиксированные ширины пикселей. Затем либо margin:0 auto, либо с абсолютным/относительным позиционированием и left:50%; margin-left:[-1/2 width]; и т.д. Мы все знаем, что это не может работать, если элемент имеет ширину, установленную в%.

Неужели нет способа сделать это так, чтобы это было действительно жидким? Я говорю об использовании % для ширины (не задавая дюжину медиа-запросов со все большей малой фиксированной шириной).

Остерегайтесь: есть множество решений, которые используют слово buzz "отзывчивое", но не отвечают на мой вопрос (потому что они используют фиксированную ширину в любом случае). Здесь пример.

Update: Я почти забыл: как вы справляетесь с ограничением максимальной ширины центрированного элемента и сохраняете его в центре? См. Мой комментарий в ответ на @smdrager. Реальный пример. Я хочу, чтобы появилось всплывающее сообщение или эффект светлого окна, содержащий абзац текста, который был бы центрирован в окне, и текст для гибкой печати в зависимости от ширины. Но я не хочу, чтобы текстовое поле растягивалось далеко до места, где текст будет трудно читать (представьте себе 4-футовый экран с тремя абзацами, растянутыми на одну строку текста). Если вы добавите максимальную ширину для большинства подходов, центрированная коробка перестанет центрировать, когда будет достигнута максимальная ширина.

4b9b3361

ОТВЕТЫ

Ответ 1

Центрирование как по горизонтали, так и по вертикали

Фактически, высота и ширина в процентах упрощают центрирование. Вы просто смещаете левую и верхнюю половину области, не занятой div.

Итак, если вы на высоте 40%, 100% - 40% = 60%. Таким образом, вы хотите на 30% выше и ниже. Затем верх: 30% делает трюк.

См. пример здесь: http://dabblet.com/gist/5957545

Центрирование только горизонтально

Использовать встроенный блок. Другой ответ здесь не будет работать для IE 8 и ниже. Для этого вы должны использовать CSS-хак или условные стили. Вот версия взлома:

См. пример здесь: http://dabblet.com/gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

ИЗМЕНИТЬ

Используя медиа-запросы, вы можете комбинировать два метода для достижения желаемого эффекта. Единственное осложнение - это высота. Вы используете вложенный div для переключения между% width и

http://dabblet.com/gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}

Ответ 2

Я думаю, вы можете использовать display: inline-block для элемента, который хотите центрировать, и установить text-align: center; на его родителя. Это определенно центрирует div на всех размерах экрана.

Здесь вы можете увидеть скрипку: http://jsfiddle.net/PwC4T/2/ Здесь я добавляю код для полноты.

HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

Для вертикального центрирования я "отбросил" поддержку некоторых старых браузеров в пользу display: table;, которые абсолютно снижают код, см. эту скрипту: http://jsfiddle.net/jFAjY/1/

Вот код (снова) для полноты:

HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

Преимущество такого подхода? Вам не нужно иметь дело с любым percantage, он также корректно обрабатывает тег <video> (html5), который имеет два разных размера (один во время загрузки, один после загрузки, вы не можете получить размер тега 'до загрузки видео.

Недостатком является то, что он отказывается от поддержки какого-то более старого браузера (я думаю, что IE8 не справится с этим)

Ответ 3

Из статьи Криса Койера о центрировании процентной ширины:

Вместо использования отрицательных полей вы используете отрицательный translate()трансформирует.

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

Ответ 4

EDIT:
http://codepen.io/gcyrillus/pen/daCyu Таким образом, для всплывающего окна вы должны использовать позицию: fixed, display: свойство table и max-width с em или rem значениями:) с этим базисом CSS:

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}

Ответ 5

Что-то вроде этого может быть?

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

DEMO: http://jsfiddle.net/t5Pp2/2/

Изменить: добавление display:block не разрушает вещь, поэтому...

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

Ответ 6

Это может показаться очень упрощенным...

Но это будет центрировать div внутри div, точно в центре относительно левого и правого полей или родительского контейнера, но вы можете отрегулировать процент симметрично слева и справа.

margin-right: 10%;
margin-left: 10%;

Затем вы можете настроить%, чтобы сделать его настолько широким, насколько вы хотите.