CSS: отзывчивый способ центрировать жидкий div (без ширины пикселей), ограничивая максимальную ширину?
Я видел миллион вопросов о том, как центрировать элемент блока, и, похоже, есть несколько популярных способов сделать это, но все они полагаются на фиксированные ширины пикселей. Затем либо margin:0 auto, либо с абсолютным/относительным позиционированием и left:50%; margin-left:[-1/2 width]; и т.д. Мы все знаем, что это не может работать, если элемент имеет ширину, установленную в%.
Неужели нет способа сделать это так, чтобы это было действительно жидким? Я говорю об использовании % для ширины (не задавая дюжину медиа-запросов со все большей малой фиксированной шириной).
Остерегайтесь: есть множество решений, которые используют слово buzz "отзывчивое", но не отвечают на мой вопрос (потому что они используют фиксированную ширину в любом случае). Здесь пример.
Update:
Я почти забыл: как вы справляетесь с ограничением максимальной ширины центрированного элемента и сохраняете его в центре? См. Мой комментарий в ответ на @smdrager. Реальный пример. Я хочу, чтобы появилось всплывающее сообщение или эффект светлого окна, содержащий абзац текста, который был бы центрирован в окне, и текст для гибкой печати в зависимости от ширины. Но я не хочу, чтобы текстовое поле растягивалось далеко до места, где текст будет трудно читать (представьте себе 4-футовый экран с тремя абзацами, растянутыми на одну строку текста). Если вы добавите максимальную ширину для большинства подходов, центрированная коробка перестанет центрировать, когда будет достигнута максимальная ширина.
Ответы
Ответ 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%;
Затем вы можете настроить%, чтобы сделать его настолько широким, насколько вы хотите.
