Обычно мы центрируем ТЕКСТ, используя свойство text-align css. Но может быть важно, чтобы вы вытащили div, абзац, таблицу или другие элементы за ухо и поместили их в центр контейнера. Для этого вам нужно применить приемов CSS .
Мы можем сделать это несколькими способами:
Используя text-align style
By margin: auto style
By position: absolute style
Теперь давайте подробнее. Отмечено, что для большей ясности мы использовали встроенный CSS в каждом поле: для выравнивания текста по левому краю, правому краю, по центру или по ширине. Вы также можете использовать это свойство для выравнивания элемента div или p.
Предположим, у вас есть div 1 с CSS, как показано ниже —
<дел>
РАЗДЕЛ 1
Этот div со всеми его компонентами по умолчанию будет выровнен по левому краю.
См. результат:
DIV 1
Но в контексте вам нравится выравнивать сам div 1 по центру со всеми стилями. Для этого просто используйте другой div в качестве оболочки или контейнера. В этом случае наша обертка — это div 2 , которая окружает div 1
А теперь просто сделайте следующее:
использовать text-align: center; с родительским div 2
use display:inline-block с дочерним div 1
Просто посмотрите!
<дел>
<дел> РАЗДЕЛ 1
Это, безусловно, приведет к-
Теперь с удовольствием посмотрите, как аналогичное кодирование на p и li дает тот же результат-
Центрировать элемент абзаца (p)
Код
<дел>
<р> абзац
Результат
абзац
Центрировать элемент списка (li)
66669 Код <дел> <ул>
Элемент 1
Элемент 2
Элемент 3
Результат
Элемент 1
Элемент 2
Элемент 3
Центрировать деление по
поля свойство
Да, вы можете легко централизовать элемент html , используя свойство margin . В этом случае вам не нужно использовать родительский DIV. Просто-
используйте margin:auto для желаемого DIV, который вы хотите поместить в центр.
Вы должны использовать свойство width со значением по вашему желанию. Браузер будет распределять ширину одинаково как левое, так и правое поле, чтобы централизовать
отд.
Вы также можете установить поле-лево:авто и поле-право:авто.
См. код
<дел>
РАЗДЕЛ 1
Результат
Надеюсь, вы знаете, что свойство POSITION используется для фиксации размещения элемента html относительно контейнера или окна просмотра. Вы можете эффективно использовать его, чтобы получить раздел по центру. В нашем примере мы будем использовать родительский контейнер div 1 и дочерний контейнер div 2 . Никаких хлопот, просто-
set width and height of div 1.
also set width and height of div 2
set position: absolute in div 2.
In div 2 , set слева: значение . Это значение должно быть равно половине (ширина div 1 – ширина div2).
Просто посмотрите-
Код
<дел>
<дел>
DIV 2 центрируется по свойству position
Результат
DIV 2 centered by position property
Хорошо, друзья, надеюсь, вам понравилось!!
Как центрировать div (по вертикали и горизонтали, IE8+)
«Как отцентрировать div» (внутри другого div или внутри самого тела) — один из самых обсуждаемых вопросов, и, к моему удивлению, существует множество туториалов, которые полностью усложняют этот вопрос, как правило, со множеством недостатков. , как фиксированная высота и ширина содержимого div. Тем не менее, есть простой, не хакерский, чистый, готовый к отклику и безопасный для разных браузеров метод, который также не требует каких-либо настроек div с фиксированным размером пикселя:
Полностью кроссбраузерный. Работает во всех браузерах (IE8 и выше).
Полностью ликвидный, размер блока не требуется
Полностью чистый, никаких странных взломов. Весь код используется так, как он должен использоваться.
Метод 1:
Центрировать элемент div посередине окна просмотра
CSS
html, body {
маржа: 0;
заполнение: 0;
ширина: 100%;
высота: 100%;
дисплей: таблица;
}
.контейнер {
отображение: таблица-ячейка;
выравнивание текста: по центру;
вертикальное выравнивание: посередине;
}
.содержание {
цвет фона: красный; /* только для демонстрации */
отображение: встроенный блок;
выравнивание текста: по левому краю;
}
HTML
<дел>
контент контент контент
оооооооооооооооооооочень контент
другой контент
Result
См. JSFiddle здесь: http://jsfiddle.net/panique/pqDQB/35/
Метод 2:
Центрирование внутри другого div по вертикали и горизонтали0263
Это очень полезно в ситуации, когда вам нужно центрировать контент внутри div, который не имеет определенного размера в пикселях. Обратите внимание, что для этого действительно не требуется ЛЮБОЕ определение размера пикселя. В демонстрационных целях мы даем родительский демонстрационный div в пикселях, просто чтобы создать наглядный пример.
CSS
.parent {
дисплей: таблица;
/* необязательно, только для демонстрации */
высота: 300 пикселей;
фон: желтый;
}
.ребенок {
отображение: таблица-ячейка;
вертикальное выравнивание: посередине;
/* необязательно, только для демонстрации */
фон: красный;
}
.содержание {
/* необязательно, только для демонстрации */
фон: синий;
}
В этом случае вам не нужно использовать родительский DIV. Просто-
Работает во всех браузерах (IE8 и выше). 
JSFiddle здесь: http://jsfiddle.net/panique/pqDQB/35/