4 разных способа центрировать элемент с помощью CSS
Когда мы создаем веб-страницу, мы, скорее всего, сталкиваемся с проблемой центрирования элемента. Итак, давайте рассмотрим 4 различных способа центрирования элемента с помощью CSS:
- Использование Flex
- Маржа Собственность
- Свойство сетки
- Абсолютная собственность
Теперь давайте посмотрим, как работают эти соответствующие свойства на примере.
HTML-код:
Имя файла: index.html
HTML
<!DOCTYPE html><html> <head> <title>Page Title</title> <link rel="stylesheet" href="styles.css" /></head> <body> <div class="parent"> <div class="child"> This element is centered </div> </div></body> </html> |
В приведенном выше коде мы создали родительский div и дочерний div. Мы рассмотрим, как центрировать дочерний div внутри родительского div. Таблица стилей с названием styles.css связана с файлом, в котором мы определили стили родительского и дочернего элементов div.
Имя файла: стили.css
CSS
.parent { height: 400px; width: 400px; background-color: red;}.child { height: 100px; width: 100px; background-color: blue;} |
Метод 1: Использование Flex Мы можем использовать Flexbox для центрирования элемента. Мы можем установить свойство display родительского div как flex и легко центрировать дочерний div, используя свойства justify-context : center (по горизонтали) и align-items : center (по вертикали) .
CSS
.parent { display: flex; justify-content: center; align-items: center;} |
Метод 2: свойство Margin Еще один простой способ центрировать дочерний элемент div — установить для него значение auto и сделать так, чтобы родительский элемент div отображался в виде сетки.
CSS
.parent { display: grid;}.child { margin: auto;} |
Способ 3: Свойство сетки Довольно простой способ центрировать элементы — использовать свойство сетки в родительском div и установить place-items: center .
CSS
.parent { display: grid; place-items: center;} |
Метод 4: Абсолютное свойство Мы также можем использовать свойство position для центрирования элементов.
CSS
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} |
Выход:
Вывод всех этих способов будет таким же, как показано ниже:
