Центрирование css: Центрирование в CSS: полное руководство

Содержание

Центрируй, властвуй, располагай / Хабр

Кирилл Мыльников

Frontend разработчик в Usetech

Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech.

Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами.

Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать).

Существует множество способов, как нужно отцентрировать элемент, в тех или иных ситуациях, каждый способ по своему хорош.

В этой статье я разберу следующие виды центрирования:

— Горизонтальное центрирование;
— Вертикальное центрирование;
— Горизонтальное и вертикальное центрирование.

Начнём.

Горизонтальное центрирование

1. Данное свойство подходит только для инлайновыйх (inline) элементов, достаточно указать text-align: center родителю.

Пример.

2. Для центрирования блочных элементов свойство text-align: center уже не подойдет. Есть простое распространённое свойство margin: 0 auto. Всё, что нам нужно, это знать ширину блока, а свойство margin 0 auto задаст следующие значения: сверху и снизу будет 0, а по бокам размеры будут заданы автоматически и блочный элемент встанет по центру.

Пример.

3. Центрирование через margin это, конечно, хорошо, но есть ещё гибкое свойство display: flex. Нам нужно задать данное свойство родителю display: flex и justify-content: center и justify-content: center — выравнивает элемент по центру.

Пример.

4. Следующее свойство — это display: grid.

Алгоритм действий как с display: flex: задать данное свойство родителю и указать justify-content: center.

Сегодня свойства grid и flexbox очень популярны в web разработке. Далее я покажу, как при помощи этих свойств можно центрировать элементы по горизонтальной и вертикальной осям.

Пример.

5. Сейчас я покажу необычное сочетание свойств text-align + display: inline-block.
Да, так тоже можно отцентрировать блочный элемент или элементы, если вам это необходимо. В самом первом примере я говорил, что свойство text-align применяется только для инлайновых элементов, но если мы укажем свойство блочному элементу display: inline-block, то он станет блочно-строчным. Это означает, что свойство text-align станет доступным и элемент встанет по центру.

Небольшая подсказка: display: inline-block нужно будет задавать не родительскому блоку, а каждому из блоков, к которым мы хотим применить данное свойство. И вновь показываю на примере.

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

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

1. Данное свойство подходит для таблиц — это vertical-align: middle.

При использовании этого типа центрирования нужно учитывать следующие условия:

Прописываем display: table родителю;
Дочернему элементу должны прописать display: table-cell, чтобы элемент стал ячейкой;
Прописываем ячейке свойство vertical-align: middle и всё, элемент становится по центру.

Пример.

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

Задать дочернему элементу position: absolute и опустить top: 50%;
Так как у дочернего элемента высота может быть любая, мы должны эту высоту разделить на 2 и результат прописать в margin-top в отрицательном значении.

Пример.

3. Когда нам нужно центрировать строку уже с известной высотой, мы просто можем указать line-height и указать ту же высоту.

Пример.

4. Центрируем с помощью внутренних отступов (padding):

Пример.

5. Ещё один способ вертикального центрирования с помощью vertical-align. Я рассматривал это свойство выше, но на примере с таблицами. Помимо этого, свойство ещё работает с display: inline/inline-block. Проще говоря, с инлайновыми элементами.

Вы должны учесть следующие условия:

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

Пример.

6. Разберём еще один случай, когда высота центрируемого элемента неизвестна. Здесь нам снова поможет абсолютное позиционирование. Давайте подробно опишем, что мы должны сделать.

Указываем дочернему элементу position: absolute и элемент опускаем в top: 50%;
Затем в нашем элементе мы прописываем свойство transform: translate (-50%) и всё, наш элемент находится на центре.

Пример.

7. Способ вертикального центрирования с помощью свойства display: flex. С этим свойством можно отцентровать элементы по вертикали. Для этого необходимо задать родителю следующие свойства: display: flex, flex-direction: column, align-items: center.

Пример.

8. Способ вертикального центрирования с помощью display: grid. В случае с вертикальным центрированием тут всё намного проще, чем с flexbox. Нам нужно указать родителю следующие свойства: display: grid и align-items: center

Пример.

9. Следующий случай, когда высота дочернего элемента неизвестна и родитель неизвестен. Чтобы задать центрирование, нам нужно:

Дочернему элементу задать position: absolute, top: 0, bottom: 0, в результате чего он растянется на всю высоту внешнего блока;
Задаем значение margin: auto 0 дочернему элементу для вертикальных отступов внутреннего блока.

Пример.

10. Заключительный способ в вертикальном центрировании: если неизвестна высота родителя и дочернего элемента, то нам поможет псевдоэлемент before.

Родителю указываем псевдоэлемент before, прописываем display: inline-block и указываем высоту в 100%. Таким образом мы занимаем всю допустимую высоту;
Центрируемый блок выравниваем по центру с помощью vertical-align: middle.

Пример.

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

Пришло время для центрирования элементов по вертикали и горизонтали. Давайте рассмотрим на конкретных примерах.

1. Если есть случаи, когда высота и ширина элемента неизвестны, нужно сделать следующее: указать дочернему элементу свойства position: absolute, top: 50%, left: 50% и transform: translate(-50%, -50%).

Пример.

2. Мы возвращаемся к flexbox, который выручает нас как никто другой. Нам нужно знать высоту и задать такие свойства: display flex; justify-content: center, align-items: center.

Пример.

3. Grid тоже не сидит на месте: свойства почти идентичны, но мы задаем display: grid вместо flex соответственно. Перед использованием grid посмотрите поддержку данного свойства в браузерах.

Пример.

4. Бывают ситуации, когда ширина и высота элемента фиксированные, а для этого нам нужно:

Пример.

5. Если мы хотим центрировать инлайновый элемент (inline, inline-block), то нам нужно свойство vertical-align. Для этого надо указать родителю псевдоэлемент before (этот пример я показывал выше), но в данном случае мы должны центрировать элементы по обе оси — вертикальной и горизонтальной. Для этого мы должны указать родителю text-align: center.

Пример.

6. Ранее я уже рассказывал, как можно центрировать элементы в таблицах, но на примере с вертикальным центрированием. В случае с вертикальным и горизонтальным центрированием, вы можете вернуться к тому шагу и в добавлении указать ячейке свойство text-align: center.

Пример.

Итак, мы разобрали все способы центрирования в CSS. Каждый способ уникален по своему и выбирать их нужно по ситуации. А каким из способов пользуетесь вы?

Центрирование (горизонтальное и вертикальное) при помощи CSS 3

Главная » Верстка

Верстка

Автор Алексей На чтение 3 мин Просмотров 474 Опубликовано 12. 02.2022 Обновлено 12.02.2022

Сегодня поговорим о том как при помощи css 3 отцентрировать элементы по вертикали и горизонтали.

Содержание

Центрирование по вертикали
Абсолютное позиционирование (transform)
Вертикальное центрирование с использованием flex
Вертикальное и горизонтальное центрирование
Центрирование в области просмотра

Центрирование по вертикали

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

Вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Для html разметки, которая выглядит так:

<div>
   <p>Какой то текст…</p>
</div>

Со следующими базовыми стилями (css правилами):

.container {
   height: 10em;
}
.container p {
   margin: 0;
}

В таблицу стилей добавить основные правила:

Делаем контейнер относительно позиционированным (position: relative).
Сам элемент делаем абсолютно позиционированным (position: absolute).
Помещаем элемент посередине контейнера с помощью ‘top: 50%’. (делаем отступ на 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

.container {
   height: 10em;
   position: relative                /* 1 */
}              
.container p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%)     /* 4 */
}

Вертикальное центрирование с использованием flex

Возьмем выше приведенную html структуру и базовые CSS классы. Допишем им классы выравнивания при помощи flex:

.container {
   height: 10em;
   display: flex;                /* 1 */
   align-items: center           /* 2 */ 
}              
. container p {
   margin: 0;
}

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

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

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). Разметку и стили берем с «Абсолютное позиционирование (transform)». Теперь добавим классы горизонтального выравнивания с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

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

А если использовать ‘flex’, всё становится намного легче:

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

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае 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>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

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

Поделиться с друзьями

Оцените автора

( Пока оценок нет )

Комбинаторы CSS

❮ Предыдущий Далее ❯

Комбинаторы CSS

Комбинатор — это то, что объясняет взаимосвязь между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простым селекторы, мы можем включить комбинатор.

В CSS есть четыре разных комбинатора:

селектор потомков (пробел)
дочерний селектор (>)
селектор соседнего брата и сестры (+)
общий родственный селектор (~)

Селектор потомков

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.

В следующем примере выбираются все элементы

внутри элементов

Пример

div p {
background-color: yellow;
}

Попробуйте сами »

Селектор дочерних элементов (>)

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

В следующем примере выбираются все элементы

, дети

element:

Пример

div > p {
цвет фона: желтый;
}

Попробуйте сами »

Селектор соседнего родственного элемента (+)

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

Родственные элементы должны иметь один и тот же родительский элемент, а «смежный» означает «сразу после».

В следующем примере выбирается первый элемент

, расположенный сразу после элементов

Пример

div + p {
background-color: yellow;
}

Попробуйте сами »

Общий селектор родственных элементов (~)

Общий селектор родственных элементов выбирает все элементы, которые являются следующими одноуровневыми элементами указанного элемента.

В следующем примере выбираются все элементы

, которые являются следующими одноуровневыми элементами

Пример

div ~ p {
background-color: yellow;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Измените цвет всех элементов

, являющихся потомками элементов

, на «красный».

<стиль>
 {
  красный цвет;
}

<тело>
<дел>
  Это абзац.
  Это абзац.

Это абзац.

Начать упражнение

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

Селектор	Пример	Пример описания
элемент элемент	раздел стр	Выбирает все элементы внутри элементов
элемент>элемент	дел > р	Выбирает все элементы , родительским элементом которых является элемент
элемент+элемент	дел + р	Выбирает первый элемент , расположенный сразу после элементов
элемент1~элемент2	р ~ ул	Выбирает каждый элемент , которому предшествует элемент

❮ Предыдущий Далее ❯

NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ

КОД ИГРЫ

Играть в игру

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

css — Как я могу центрировать в div?

Спросил

12 лет, 11 месяцев назад

Изменено 1 год, 2 месяца назад

Просмотрено 495 тысяч раз

100

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Как центрировать неупорядоченный список из

в div фиксированной ширины

 ?
 <таблица>
  <тело>
  
    
     
      StudioTeknik.com
      

        Марк-Андре Менар
      <ул>
        Цифровая фотография
        Инфография 
        Отладка и ИТ (MAC и ПК)
         Ретушь 
        Сайт в Интернете
        Графика
      
      Cellulaire en suisse: +41 079573 48 99
      Skype:  менардмам
    Курриэль: archive.org/web/20100104192317/mailto:[email protected]"> [email protected] 
  
  
 
 CSS
 HTML
 HTML-списки
 0
 Чтобы центрировать ul и , также центрируйте элементы li  , и сделайте так, чтобы ширина ul динамически изменялась, используйте display: inline-block; и оберните его в центрированный div.

Центрируй, властвуй, располагай / Хабр

Кирилл Мыльников

Горизонтальное центрирование

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

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

Центрирование (горизонтальное и вертикальное) при помощи CSS 3

Центрирование по вертикали

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

Вертикальное центрирование с использованием flex

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

Центрирование в области просмотра

Комбинаторы CSS

Комбинаторы CSS

Селектор потомков

Пример

Селектор дочерних элементов (>)

Пример

Селектор соседнего родственного элемента (+)

Пример

Общий селектор родственных элементов (~)

Пример

Проверьте себя с помощью упражнений

Упражнение:

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

ПАЛЕТКА ЦВЕТОВ

КОД ИГРЫ

Top Tutorials

Лучшие примеры

css — Как я могу центрировать в div?

StudioTeknik.com