Auto center body html

CSS
Центрирование

Преобразования CSS основаны на размере элементов, поэтому, если вы не знаете, насколько высокий или широкий ваш элемент, вы можете установить его на 50% сверху и слева от относительного контейнера и перевести его на 50% слева и вверх центрировать его вертикально и горизонтально.

Имейте в виду, что с помощью этой методики элемент может заканчиваться визуализацией на нецелой границе пикселя, что делает его размытым. См. Этот ответ в SO для обходного пути.

СОВМЕСТИМОСТЬ КРЕСТОВЫХ БРАУЗЕРОВ

Ниже приведено общее объявление преобразования для предыдущего примера:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); 

Для получения дополнительной информации см. CanIuse .

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

• Элемент позиционируется в соответствии с первым нестатическим родителем ( position: relative , absolute или fixed ). Узнайте больше в этой скрипке и этой теме документации .

• Для центрирования по горизонтали используйте left: 50% и transform: translateX(-50%) . То же самое касается центрирования по вертикали: центр с top: 50% и transform: translateY(-50%) .

• Использование нестатических элементов ширины / высоты с помощью этого метода центрирования может привести к появлению срезающего элемента. Это чаще всего происходит с элементами, содержащими текст, и может быть исправлено путем добавления: margin-right: -50%; и margin-bottom: -50%; , Просмотрите эту скрипку для получения дополнительной информации.

Использование Flexbox

html, body, .container < height: 100%; >.container < display: flex; justify-content: center; /* horizontal center */ >img < align-self: center; /* vertical center */ >

См Динамическая горизонтального и вертикального центровку под Flexbox документации для получения более подробной информации о Flexbox и какие стили означают.

Поддержка браузера

Flexbox поддерживается всеми основными браузерами, за исключением версий IE до 10 .

Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют префиксов поставщиков .

Для быстрого создания префиксов существует инструмент Autoprefixer , сторонний инструмент.

Для старых браузеров (например, IE 8 и 9) доступен Polyfill .

Для более подробного просмотра поддержки браузера Flexbox см. Этот ответ .

Использование позиции: абсолютная

Работа в старых браузерах (IE> = 8)

Автоматические поля, в сочетании со значениями нуля для left и right или top и bottom смещений, будут центрировать абсолютно позиционированные элементы внутри своего родителя.

Элементы, которые не имеют своей собственной неявной ширины и высоты, как изображения, будут нуждаться в этих значениях.

Техника элемента призрак (взлома Михала Чернова)

Этот метод работает, даже когда размеры контейнера неизвестны.

Настройте элемент «призрак» внутри центрированного контейнера, который будет на 100% высотой, затем используйте vertical-align: middle как для элемента, так и для центрированного элемента.

/* This parent can be any width and height */ .block < text-align: center; /* May want to do this if there is risk the container may be narrower than the element inside */ white-space: nowrap; >/* The ghost element */ .block:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; /* There is a gap between ghost element and .centered, caused by space character rendered. Could be eliminated by nudging .centered (nudge distance depends on font family), or by zeroing font-size in .parent and resetting it back (probably to 1rem) in .centered. */ margin-right: -0.25em; >/* The element to be centered, can also be of any width and height */ .centered < display: inline-block; vertical-align: middle; width: 300px; white-space: normal; /* Resetting inherited nowrap behavior */ >

Использование выравнивания текста

Наиболее распространенным и простым типом центрирования является текст строк в элементе. CSS имеет правило text-align: center для этой цели:

Это не работает для центрирования целых элементов блока . text-align управляет только выравниванием встроенного контента, такого как текст в его родительском блочном элементе.

Подробнее о text-align в разделе « Типография ».

Центрирование по отношению к другому элементу

Мы увидим, как центрировать контент в зависимости от высоты близкого элемента.

Совместимость: IE8 +, все другие современные браузеры.

.content * < box-sizing: border-box; >.content .position-container < display: table; >.content .details < display: table-cell; vertical-align: middle; width: 33.333333%; padding: 30px; font-size: 17px; text-align: center; >.content .thumb < width: 100%; >.content .thumb img

Основными пунктами являются .thumb , .details и .position-container container:

• В .position-container должен display: table .
• .details должны иметь реальную ширину width: . и display: table-cell , vertical-align: middle .
• .thumb должна иметь width: 100% если вы хотите, чтобы она заняла все оставшееся пространство, и на нее будет влиять ширина .details .
• Изображение (если у вас есть изображение) внутри .thumb должно иметь width: 100% , но это не обязательно, если у вас есть правильные пропорции.

Вертикальное выравнивание с тремя строками кода

Используйте эти 3 строки для вертикального выравнивания практически всего. Просто убедитесь, что div / image, к которому вы применяете код, имеет родителя с высотой.

Вертикально выравнивать изображение внутри div

Горизонтальное и вертикальное центрирование с использованием таблицы

Можно легко центрировать дочерний элемент, используя свойство отображения table .

Используя calc ()

Функция calc () является частью нового синтаксиса в CSS3, в котором вы можете вычислить (математически), какой размер / позиция занимает ваш элемент, используя различные значения, такие как пиксели, проценты и т. Д. Примечание: — всякий раз, когда вы используете эту функцию , всегда занимайтесь пространством между двумя значениями calc(100% — 80px) .

Вертикально выровнять элементы динамической высоты

Применение css интуитивно не дает желаемых результатов, потому что

Для самой широкой поддержки браузера используется обходной путь со вспомогательными элементами:

.vcenter--container < display: table; height: 100%; position: absolute; overflow: hidden; width: 100%; >.vcenter--helper < display: table-cell; vertical-align: middle; >.vcenter--content

• работает с динамическими элементами высоты
• уважает поток контента
• поддерживается устаревшими браузерами

Использование высоты линии

Вы также можете использовать line-height чтобы центрировать вертикально одну строку текста внутри контейнера:

Это довольно уродливо, но может быть полезно внутри элемента . Свойство line-height работает только тогда, когда текст, который будет центрирован, охватывает одну строку. Если текст переносится на несколько строк, результирующий вывод не будет центрирован.

Центрирование вертикально и горизонтально, не беспокоясь о высоте или ширине

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

Внешний контейнер

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

• должен иметь display: table-cell;
• должен иметь vertical-align: middle;
• должен иметь text-align: center;

Поле содержимого

• должен иметь display: inline-block;
• следует перенастроить горизонтальное выравнивание текста, например. text-align: left; или text-align: right; , если вы хотите, чтобы текст был центрирован

демонстрация

body < margin : 0; >.outer-container < position : absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; >.inner-container < display: table-cell; vertical-align: middle; text-align: center; >.centered-content

Центрирование с фиксированным размером

Если размер вашего контента фиксирован, вы можете использовать абсолютное позиционирование до 50% с margin который уменьшает половину ширины и высоты вашего контента:

Горизонтальное центрирование с фиксированной шириной

Вы можете центрировать элемент горизонтально, даже если вы не знаете высоту содержимого:

Вертикальное центрирование с фиксированной высотой

Вы можете центрировать элемент по вертикали, если знаете высоту элемента:

Использование margin: 0 auto;

Объекты могут быть центрированы с использованием margin: 0 auto; если они являются блочными элементами и имеют определенную ширину.

.containerDiv < width: 100%; height: 100px; padding-bottom: 40px; >#centeredDiv < margin: 0 auto; width: 200px; height: 100px; border: 1px solid #000; >#centeredParagraph < width: 200px; margin: 0 auto; >#centeredImage

Источник

Auto center body html

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник