Выравнивание div по центру

Вариант 5

Есть ещё один вариант центровки блоков, если их строго равное количество. Например: блоков 9, по 3 на каждую строчку. И вы знаете, что так будет оставаться всегда. Например, вы делаете лендинг пейдж и знаете наверняка, что ничего лишнего между этими блоками добавляться на сайт не будет.

Итак, имеем 9 блоков следующего вида (не стал дублировать 9 раз строки, но имейте ввиду, что блоков 9):

<div class=»archive-container-for-articles»>     <article class=»archive-article»>     Блок 1     </article>     <article class=»archive-article»>     Блок 2     </article>     <article class=»archive-article»>     Блок 3     </article> </div>

Применяем стили для них:

.archive-container-for-articles {     width: 100%;     text-align: center; } .archive-article {   width: 25%;   vertical-align: top;   display: inline-block;   text-align: left; } .archive-article:nth-child(1), .archive-article:nth-child(4), .archive-article:nth-child(7) {     margin: 20px 0 30px 40px; } .archive-article:nth-child(2), .archive-article:nth-child(5), .archive-article:nth-child(8) {     margin: 20px 40px 30px; } .archive-article:nth-child(3), .archive-article:nth-child(6), .archive-article:nth-child(9) {     margin: 20px 40px 30px 0; }

Получим тоже адаптивную вёрстку. При уменьшении экрана не помещающийся блок будет уходить в центр низа

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

А главный недостаток, что внутрь блоков нельзя ничего поместить. Любой элемент:

<article class=»archive-article»></article> вот здесь <article class=»archive-article»></article>

будь то div или p или ещё что-то, будет считаться как внутренний элемент nth-child. В результате на него наложится стили CSS и все отступы сделанные с помощью margin сместят блоки не так как было задумано изначально.

Советы по центрированию с помощью CSS

HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.

Выравнивание текста по центру CSS

Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align:

p.center { text-align: center; }

С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.

Применения этого класса:

<p class="center">This text is centered.</p>

При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.

Выровнять по центру CSS блоки контента

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью <div>.

Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto:

div.center {
 margin: 0 auto;
  width: 80em;
}

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение , а левый и правый отступы будут использовать значение auto. Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align.

Применение в HTML:

<div class="center">This entire block is centered,
but the text inside it is left aligned.</div>

Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы выровнять по центру текст, используйте свойство text-align, которое мы описывали ранее.

Как выровнять картинку по центру в HTML

Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align. Но не стоит полагаться на этот метод, так как он не рекомендован W3C.

Но как выровнять картинку по центру CSS? Для этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:

img.center {
 display: block;
  margin-left: auto;
  margin-right: auto;
}

Вот HTML код для изображения, которое нужно центрировать:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">

Также можно центрировать объекты с помощью встроенного CSS:

<div style="text-align: center;">

Вертикальное центрирование элементов

HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3, появилось решение для этой задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle:

.vcenter {
  vertical-align: middle;
}

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

• Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div;
• Задайте минимальную высоту элементу-контейнеру;
• Объявите элемент-контейнер;
• Установите для HTML vertical align значение middle.

Например:

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

HTML код:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

Выравнивание по горизонтальному центру строчных (inline) и строчно-блочных (inline-block) элементов

Как известно, у нас есть простые способы центрировать контент по горизонтали. Для этого мы используем для абзаца, div-а, заголовка, т.е. любого блочного элемента, внутри которого размещен текст или картинка, — и все работает. Например, код для изображения ниже будет таким:

Изображение внутри абзаца с text-align:center

<p style=»text-align: center»>
<img src=»images/cube.jpg» alt=»Центрированное изображение» width=»300″ height=»210″>
</p>

1 2 3

<pstyle=»text-align: center»> <img src=»images/cube.jpg»alt=»Центрированное изображение»width=»300″height=»210″> <p>

Аналогично будет центрирован любой элемент, для которого свойство задано, как или .

Относительное позиционирование (relative)

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства .

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

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

position: relative;
/* для сдвига элемента вверх на 10px */
top: -10px; /* или bottom: 10px; */
/* для сдвига элемента вниз на 10px */
top: 10px; /* или bottom: -10px; */  

Если одновременно установить и , то будет применено значение , т.к. оно является более приоритетным, чем :

position: relative;
/* элемент или элементы, к которым применяется эти стили будут сдвинуты на 15px вверх, а не на 10px как указано в bottom */
top: -15px;
bottom: 10px;

Для сдвига элемента вправо или влево используется CSS свойство или :

position: relative;
/* для сдвига элемента влево на 20px */
left: -20px; /* или right: 20px; */
/* для сдвига элемента вправо на 20px */
left: 20px; /* или right: -20px; */

Если одновременно установить и , то приоритетным будет значение, находящееся в :

position: relative;
/* элемент или элементы, к которым применяется эти стили будут сдвинуты на 25px вправо, т.к. значение left более приоритетно чем right */
left: 25px;
right: -20px;

Для сдвига по двум осям нужно использовать или , и или :

position: relative;
/*  стили для сдвига элементов вверх и влево на 5px */
top: -5px;
left: -5px;

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на вверх и влево относительно его исходного положения:

<div class="container">
  <div class="element-1">FIRST ELEMENT</div>
  <!-- элемент имеет относительное позиционирование и смещён на 20px вверх и влево -->  
  <div class="element-2" style="position: relative; top: -20px; left: -20px;">SECOND ELEMENT</div>
  <div class="element-3">THIRD ELEMENT</div>
</div>

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства . может принимать отрицательные и положительные целые число, и . Но, хорошей практикой является использование в качестве чисел из диапазона .

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

Alignment and auto margins

Другой способ выравнивания элементов внутри их области — использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в , вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.

В следующем примере я дал элементу 1 левое поле . Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter:

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h1>Красиво выровнен по центру</h1>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в )

Подробно о расположении div по центру

1. Несколько вариантов расположения div по центру — если известна высота и ширина, двух блоков, которые расположены один в другом…

   Это довольно простая ситуация, с точки зрения позиционирования.

   Сделал 4 варианта — думаю для этого пункта будет достаточно!

   В данном случае … у нас будет известна и высота и ширина div, что еще больше упрощает ситуацию.

   1. Для данного примера установки одного блока в середине другого блока нам понадобится:

      Один наружный div с произвольным названием класса = «out».

      И второй div с таким же произвольным названием класса, кот орый будет находится внутри предыдущего:

      <div class=»out»>
      <div class=»into»></div>
      </div>

      Css :

      Далее переходим к css, с помощью которого и поставим div по центру другого div.

      Задаем свойства для класса «out» :

      text-align: center; — за горизонтальное

      display + table-cell + vertical-align: middle; — отвечают за вертикальное выравнивание

      Задаем свойства для класса «into»… тут все свойства подобные, кроме «display» он имеет значение «inline-block» — которое вместе с «text-align» выше отвечает за горизонтальное выравнивание.

      Соберем весь код вместе:

   2. Следующий вариант постановки div по центру — использование таблицы. Т.е. если сравнить css с предыдущем, то у наружного класса убираем «display: table-cell» и div замещаем table с td

   3. Следующий пример постановки div по центру, зависит от стилей внутреннего div.

      position и

   4. Здесь постановка div по центру возможна только в сотрудничестве

      display + flex и

      Свойство margin, внутреннего div

Как поставить «div по центру экрана» если высота экрана неизвестна?

Данный пример расположения div по центру — требует отдельного примера на отдельной странице.

Пример

Ширина наружного элемента(width) и высота(height) — в данном примере никак не влияет на позиционирование.

Название скрипта :Div по центру
Ссылка на скачивание : Все скрипты на

CSS-свойство position

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

Свойство имеет 5 значений:

• static (статичное позиционирование);
• relative (относительное);
• absolute (абсолютное);
• fixed (фиксированное);
• sticky (липкое).

— это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.

Это, например, происходит при задании элементу или . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

position и отрицательный margin вверх

Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ line-height</title>
<style>
.wrapper {
   position:  relative;
   height:  400px;
}
.wrapper p {
   height:  200px;
   margin:  -100px 0 0;
   position:  absolute;
   top: 50%;
}
</style>
</head>
<body>
   <div class="wrapper">
      <p>Я выровнен по вертикали</p>
   </div>
</body>
</html>

Плюсы:

• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении.

Минусы:

• Трудоемко при большом количестве элементов;
• Сложно управлять;
• Необходимо знать и фиксировать высоту элемента;
• В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

Фиксированное позиционирование (fixed)

Задание элементу фиксированного позиционирования осуществляется посредством установки ему .

Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.

Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.

<body>
  <div style="width: 200px; height: 2000px; border: 1px solid black; background: green;"></div>
  <div style="width: 600px; height: 200px; position: fixed; top: 100px; left: 100px; border: 1px solid black; background:red;"></div>
</body>

Выравнивание содержимого по главной оси

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

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

Свойство  может принимать те же самые значения, что и .

• (не определено в спецификации Flexbox)

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

Если свойство  имеет значение , то свойство  распределит доступное пространство в контейнере между элементами.

Необходимо помнить, что при использовании свойств  и элементы позиционируются в режиме записи. Если свойству  задано значение  и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

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

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

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

Центр!

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

Абсолютное позиционирование слоя

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

Вначале следует указать ширину и высоту слоя с помощью width и
height. Размеры можно задавать в пикселах, процентах или других единицах.
Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за
этой особенности предлагаемый метод размещения по центру является наиболее
универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через
position: absolute. Положение слоя следует определить как 50% по горизонтали
и вертикали с помощью свойств left и top. Эти значения остаются неизменными,
независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного
выравнивания следует добавить свойства margin-left и margin-top с отрицательными
значениями. Их величина должна быть равна половине ширины слоя (для margin-left)
и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto,
он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом
остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

В случае использования процентной записи стиль меняется незначительно, надо
так же поделить ширину и высоту пополам и добавить полученные значения в
качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width, padding и border.

Пример 6. Ширина слоя в процентах

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется
установить значение одного из параметров в процентах, соответственно, поменяется
и запись другого параметра. Как показано в данном примере, ширина слоя установлена
в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

CSS

.text-vertical-al{
display:table;
}
.text-vertical-al p{
display:table-cell!important;
vertical-align:middle;
}

1 2 3 4 5 6 7 8

.text-vertical-al{ displaytable; }   .text-vertical-al p{ displaytable-cell!important; vertical-alignmiddle; }

В результате у нас все заработало:

Выравнивание текста по вертикали CSS

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

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

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

1 2 3 4 5 6

table.table-va td{ border1pxsolid#1e1e1e; background-colorrgba(0,146,243,0.13); height40px; vertical-alignmiddle;/* выравнивание текста по вертикали css*/ }

В этом случае во всех ячейках текст будет выровнен по вертикали по центру:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

1 2 3 4 5 6 7 8 9 10

<table class=»table-va»> <caption>CSS выравнивание по вертикали в таблице</caption> <tbody> <tr> <td style=»vertical-align:top;»>По верху</td> <td style=»vertical-align:middle;»>По центу</td> <td style=»vertical-align:bottom;»>По низу</td> </tr> </tbody> </table>

Вот что получится:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Задача вертикального центрирования

Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный — задаем ему ширину и автоматическую установку левого и правого полей.

Большинство людей, используя свойство text-align:, обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign, который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

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

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

Правила размещения flex-элементов

Чтобы управлять flex-элементами, нужны justify-content и align-items. В зависимости от указанных значений, эти два свойства размещают объекты нужным образом автоматически. Если нам нужно выровнять все вложенные DIV по центру, мы записываем justify-content: center, align-items: center и больше ничего. Всю остальную работу браузер выполнит сам:

Чтобы выровнять текст по центру DIV, которые являются flex-элементами, можно использовать стандартный прием text-align. Или вы можете каждый вложенный DIV также сделать flex-контейнеров и управлять содержимым с помощью justify-content. Такой способ гораздо рациональнее, если внутри содержится разнообразный контент, включая графику, другие вложенные объекты, включая многоуровневые списки.

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет. 

.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Как выровнять в html текст по центру?

В HTML есть два варианта, которые не предполагают использование CSS.

1. 1.Тег <center>
   Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
   • текст,
   • картинки,
   • ссылки,
   • а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.

   PHP

   <center>
   Текст, который нужно выровнять по центру.
   </center>

   1 2 3

   <center> Текст,которыйнужновыровнятьпоцентру. <center>

2. 2.Использование HTML атрибута align cо значением center.
   Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
   Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.

   PHP

   <h2 align=»center»>Выравнивание текста по центру при помощи HTML</h2></li>

   1	<h2 align=»center»>ВыравниваниетекстапоцентруприпомощиHTML<h2><li>

Если у вас не срабатывает выравнивание заданное при помощи HTML, то, скорее всего, для этого блока уже задано выравнивание в CSS.

Так же атрибут align имеет и другие значения:

• align=’»left’ — выравнивание текста по левому краю
• align=’right’ – выравнивание по правому краю
• align=’justify’ – выравнивание текста по ширине

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding».

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{
background: #535E73;
width: 200px;
height: 200px;
padding: 20px 50px;
}

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute», тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top»,»right»,»bottom»,»left») внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{
position: relative;
height: 250px;
background: url(space.jpg);
}

.cat-king{
width: 200px;
height: 200px;    
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
margin: auto;
background: url(king.png);
}

Ставим картинку по центру с помощью flex

Следующий способ поставить картинку по центру — это display со значением «flex».

Для того, чтобы поставить картинку по центру нам понадобится, опять картинка img с id + оберенем в div с классом class

<div class=»kartinka_po_tsentru_flex»>
<img id=»kartinka_po_tsentru_flex» src=»https://dwweb.ru/путь/new_logo.png»>
</div>
Css:

Немного стилей:

<style>
.kartinka_po_tsentru_flex {
display: flex;
height: 200px;
background: burlywood;
}
#kartinka_po_tsentru_flex {
margin: auto;
}
</style>

Соберем весь код вместе: Html:
<div class=»kartinka_po_tsentru_flex»>
<img id=»kartinka_po_tsentru_flex» src=»https://dwweb.ru/путь/new_logo.png»>
</div>
Css:
<style>
.kartinka_po_tsentru_flex {
display: flex;
height: 200px;
background: burlywood;
}
#kartinka_po_tsentru_flex {
margin: auto;
}
</style>

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

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

Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы
может быть выровнено по центру вертикально.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Этот маленький абзац...
</DIV>

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, а также Android Browser 40+.

CSS

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px; 
}

HTML

<div class="container"><div class="item"></div><div>

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Вариант 2

Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:

Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?

Имеем следующую структуру:

<div class=»archive-container-for-articles»>     <article class=»archive-article»>     Блок 1     </article>     <article class=»archive-article»>     Блок 2     </article>     <article class=»archive-article»>     Блок 3     </article>     <article class=»archive-article»>     Блок 4     </article>     <article class=»archive-article»>     Блок 5     </article> </div>

Для них прописываем классы:

.archive-container-for-articles {     width: 90%;     margin: 0 auto; } .archive-article {     display: inline-block;     vertical-align: top;     width: calc(33.3333% — ( 0.666666666667 * 36px ) );     margin: 0 10px 0 11px; }

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру

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

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

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

@media screen and (max-width: 768px) {     .archive-article {         width: calc(47.3333% — ( 0.666666666667 * 25px ) );         margin: 0 10px 0 20px;     } }

Получим те же блоки в мобильном варианте, но уже по два блока на строку: