paint-brush
3 современных метода CSS для центрирования элементовк@briantreese
319 чтения
319 чтения

3 современных метода CSS для центрирования элементов

к Brian Treese5m2024/02/27
Read on Terminal Reader

Слишком долго; Читать

Изучите три эффективных способа центрирования элементов в CSS: позиционирование, Flexbox и CSS Grid. Узнайте, как добиться идеального центрирования с помощью минимального кода, от традиционного метода использования абсолютного позиционирования до современной простоты Flexbox и CSS Grid. Независимо от того, являетесь ли вы новичком или опытным разработчиком, эти методы предлагают универсальные решения для ваших потребностей в веб-разработке.
featured image - 3 современных метода CSS для центрирования элементов
Brian Treese HackerNoon profile picture


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


Хорошо, давайте перейдем к делу.


Действительно странно, что так долго было так сложно просто размещать элементы в центре контейнера в Интернете. Что ж, горизонтальное центрирование было простым, но вертикальное центрирование было практически невозможным вплоть до недавнего времени.


Использование CSS-позиционирования для центрирования элементов

Этот первый метод, использующий позиционирование CSS, вероятно, существует дольше всех, но он немного развился по мере появления новых свойств. Давайте посмотрим на пример.


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

Демонстрация перед использованием позиционирования CSS для центрирования элементов


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


 strong { position: absolute; }


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


 div { position: relative; }


Теперь мы можем расположить наш элемент ниже пятидесяти процентов высоты нашего div и более пятидесяти процентов ширины. Для позиционирования сверху вниз мы можем использовать новое логическое свойство inset-block-start со значением пятьдесят процентов. А для позиционирования слева мы можем использовать inset-inline-start с тем же значением пятьдесят процентов.


 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 


Демо после позиционирования CSS, но перед переводом в центральные элементы


Хорошо, значит, он не совсем по центру, не так ли?


Ну, это потому, что мы разместили элемент в центре нашего div , но его положение основано на его верхнем левом углу. Теперь нам нужно сдвинуть элемент назад на пятьдесят процентов его высоты и назад на пятьдесят процентов его ширины. Это позволит правильно разместить его в центре. Но как мы можем это сделать?


На самом деле это очень легко. Мы можем использовать новое свойство translate CSS. Первое значение будет перемещаться вдоль оси X. Нам нужно вернуться на пятьдесят процентов назад, поэтому мы добавим значение минус пятьдесят процентов. А второе значение перемещается по оси Y, и мы присвоим ему то же значение, равное минус пятидесяти процентам.


 strong { ... translate: -50% -50%; } 


Демо после позиционирования CSS и перевода в центральные элементы


И вот мы идем. Идеально центрировано.


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


Итак, это один из способов сделать это, но он не мой любимый.

Использование Flexbox для центрирования элементов

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


Итак, мы начинаем с одной и той же точки: у нас есть внешний элемент div с красной рамкой, а затем наш внутренний сильный элемент.


Демонстрация перед использованием CSS Flexbox для центрирования элементов


Начнем с того, что сделаем наш div гибким контейнером с дисплеем flex. Затем мы можем выровнять наш элемент по центру вдоль оси X с помощью свойства justify-content и значения center. И последнее, но не менее важное: мы можем выполнить выравнивание по оси Y с помощью свойства align-items и того же значения center.


 div { display: flex; justify-content: center; align-items: center; } 


Демо после CSS Flexbox для центрирования элементов


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


Вот окончательный рабочий пример использования Flexbox:


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

Использование сетки для центрирования элементов

Хорошо, та же отправная точка с красным полем и внутренним элементом.


Демонстрация перед использованием CSS Flexbox для центрирования элементов


На этот раз мы сделаем наш div контейнером сетки с display значением grid . Что здесь круто, так это то, что мы можем использовать те же два свойства, которые мы использовали для нашего примера с флексбоксом, если захотим. Мы можем добавить justify-content: center и align-items: center . Это работает точно так же.


 div { display: grid; justify-content: center; align-items: center; }


Забавно, но именно так работает сетка: она может использовать те же свойства выравнивания поля, что и flexbox. Но если бы мы оставили все как есть, в использовании сетки не было бы никакого преимущества, верно?


Вместо этого мы можем удалить эти свойства выравнивания и заменить их свойством Place-Items. И мы можем присвоить этому свойству значение center.


 div { display: grid; place-items: center; } 


Демо после CSS Grid для центрирования элементов


Итак, теперь мы сократили все до двух строк CSS.


Вот окончательный рабочий пример использования CSS Grid:


Заключение

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


Также опубликовано здесь .