Главная → Программирование → by

Абсолютное горизонтальное и вертикальное центрирование в CSS.

Все мы когда-нибудь видели и использовали команду margin: 0 auto; для центрирования по горизонтали, но команда margin: auto; не работает для вертикального центрирования… до сих пор! Но на самом деле (внимание, спойлер!) абсолютное центрирование требует объявления (переменных) высоты и соответствующего стиля:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

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

Пользователь Simon связывает этот метод с jsFiddle и акцентирует внимание на том, что каждый второй метод вытащен из воды (тот же метод, был упомянут Priit в комментариях). В ходе дальнейшего изучения мне пришлось воспользоваться определенными ключевыми словами для поиска других источников, раскрывающих особенности этого метода.

Прежде, я ни разу не использовал этот метод, но как только я приступил к его тестированию, то сразу же обнаружил, насколько на самом деле может быть невероятным Абсолютное центрирование.

Преимущества:

  • Поддержка различными версиями браузеров (в том числе IE8-10 без необходимости использования дополнительных средств адаптации!);
  • Никакой специальной разметки, минимальность стилей;
  • Адаптивность при процентном соотношении и min-/max-;
  • Центрирование осуществляется независимо от заполнения (без box-sizing!);
  • Отлично работает на изображениях.

Предупреждение:

  • Должна быть объявлена высота (смотрите регулируемая высота);
  • Рекомендуем установить overflow: auto для предотвращения переполнения контента (смотрите переполнение);
  • Не работает на Windows Phone.

Совместимость работы с браузером:

Абсолютное центрирование было протестировано и показало безупречную работоспособность в последних версиях Chrome, Firefox, Safari, Mobile Safari, и даже в IE8-10.

Если вы обнаружите какие-либо дополнительные функции, или у вас появятся вопросы, пожалуйста, оставьте соответствующие комментарии здесь или на CodePen.

Внутри контейнера.

Поместите блок контента вовнутрь контейнера position: relative. Это действие поможет выполнить качественное центрирование контента в контейнере!

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Абсолютное центрирование
внутри контейнера.

Этот блок получил абсолютное центрирование, горизонтальное и вертикальное, благодаря использованию внутри контейнера
position: relative

В области окна просмотра.

Установите для вашего блока контента значение position: fixed и задайте ему z-index для сохранения центрирования в окне просмотра.

  • Mobile Safari: блок контента будет центрироваться по вертикали на всю величину документа, но не окна просмотра и при условии, что он находится не внутри position: relative контейнера.
.Absolute-Center.is-Fixed {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
}

Смотрите демонстрационную страницу.

Адаптивность.

Пожалуй, наиболее полезным качеством Абсолютного центрирования является то, что оно отлично работает в случае представления процентного отношении ширины/высоты! Даже min-width/max-width и min-height/max-height стили ведут себя, в соответствии с адаптивными блоками.

Двигайтесь вперед, добавьте функцию заполнения для элемента; Абсолютное центрирование не препятствует такой возможности!

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Абсолютное центрирование,
основанное на процентном соотношении.

Этот блок имеет абсолютное центрирование, горизонтальное и вертикальное, даже на основе процентного соотношения ширины и высоты, min-/max-, и заполнение!

Смещение.

Если вы имеете фиксированный заголовок или вам нужно добавить определенную величину смещения, то просто пропишите в блоке контента top: 70px;. До тех пор, пока будет установлено значение margin: auto; содержимое блока будет центрироваться вертикально в пределах границ, которые вы объявили командой top left bottom и right.

Вы также можете разместить свой блок контента справа или слева, при этом также будет выполняться вертикальное центрирование. Для этого нужно использовать команду right: 0; left: auto; чтобы держаться правой стороны или left: 0; right: auto;, чтобы придерживаться левой стороны.

.Absolute-Center.is-Right {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: auto; bottom: 0; right: 20px;
  text-align: right;
}

Вертикальное центрирование,
выравнивание по правому краю.

Этот блок имеет абсолютное вертикальное центрирование внутри контейнера и размещается в правой части благодаря команде right: 0; left: auto;

Переполнение.

Контент, расположенный выше блока или контейнера (окно просмотра или position: relative контейнер) будет переполняться и может распространиться за пределы блока контента и контейнера или даже частично обрезаться. Простое добавление команды overflow: auto позволит контенту прокручиваться в блоке, до тех пор, пока сам блок контента не станет выше, чем его контейнер (например, путем добавления команды max-height: 100%; если у вас нет каких-либо заполнений блока контента).

.Absolute-Center.is-Overflow {
  width: 50%;
  height: 300px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Абсолютное центрирование
с переполнением.

Этот блок имеет абсолютное центрирование внутри своего контейнера, с контентом, установленным на переполнение.

Изменение размера.

Вы можете изменить размер блока контента с помощью других классов или Javascript кода без необходимости вычисления центра вручную! Вы можете пользоваться свойством resize даже если блок контента будет изменен пользователем.

Абсолютное центрирование позволяет разместить блок по центру независимо от текущих изменений. Настройка min-/max- будет ограничивать размер блока, таким образом, как вам это нужно и позволит предотвратить его выход за пределы окна/контейнера.

Если вы не используете свойство resize, тогда можно добавить transition для плавного анимирования переходов между размерами. Обязательно установите значение overflow: auto поскольку размеры блока могут быть заданы меньше, чем контента.

Предупреждение:

  • Установите значение max-width/max-heightчтобы компенсировать любое дополнение к содержимому блока, иначе это вызовет переполнение контейнера.
  • Свойство resize не поддерживается мобильными браузерами или IE 8-10 поэтому убедитесь, что ваши пользователи имеют альтернативный способ изменения размера, если это необходимо для работы.
  • Сочетание свойств resize и transition вызывает задержку, равную времени перехода, когда пользователь пытается изменить размер.
.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Абсолютное центрирование,
изменение размера.

Этот блок полностью сосредоточен внутри контейнера и может быть изменен пользователем или через Javascript код.

Изображения.

Абсолютное центрирование также будет работать и в случае применения его к изображениям! Используйте для изображения класс/стиль и установите height: auto; для адаптивности размеров изображения, чтобы соответствующим образом изменять размер контейнера.

Обратите внимание, что height: auto; работает для изображений, но приводит к тому, что регулярные блоки контента растягиваются на весь контейнер, если вы используете технику переменной высоты. Вполне вероятно, что браузеры должны рассчитывать высоту для визуализируемого изображения, поэтому margin: auto; завершает свою работу, как только произойдет объявление высоты. Так произошло во всех протестированных браузерах.

.Absolute-Center.is-Image {
  width: 50%;
  height: auto;
  margin: auto;
  p ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



 		
		
				
		
				

			  Главная   →  Программирование  →   by

Comments are closed.