Центрирование в CSS

От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.

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

1. Встроенные элементы

text-align

Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.

<div class="desk"> <span class="plate"></span>
</div>

.desk { text-align: center;
}

Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.

<div class="desk"> <span class="plate"></span> <span class="plate"></span>
</div>

.desk { text-align: center;
}

Flexbox

Изменив display на flex гибкий, мы можем легко центрировать содержимое.

.desk { display: flex; justify-content: center;
}

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

.desk { display: flex; justify-content: center;
}

CSS-сетка

С помощью сеточного контейнера тарелка будет центрирована в соответствии с ее областью сетки. Обратите внимание, что это не будет работать с более чем одной тарелкой, если они не будут обернуты в один элемент.

.desk { display: grid; justify-content: center;
}

2. Блочные элементы

Auto Margin

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

.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto;
}

Auto Margin

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

.tray { display: flex; margin-left: auto; margin-right: auto;
}

Flexbox

Вы можете использовать flexbox для центрирования тарелки.

.desk { display: flex; justify-content: center;
}

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

.desk { display: flex; justify-content: center;
}

CSS позиционирование

Абсолютно позиционируя тарелку, мы можем легко центрировать ее по горизонтали с помощью преобразований CSS.

.plate { position: absolute; left: 50%; transform: translateX(-50%);
}

Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.

.plate { position: absolute; left: 50%; margin-left: -60px;
}

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

1. Встроенные элементы

Вертикальный отступ

Один из самых простых способов центрировать элемент по вертикали — использовать отступы.

.desk { padding-top: 24px; padding-bottom: 24px;
}

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

Свойство vertical-align можно использовать для одного или нескольких элементов. В этом примере вилка и нож должны быть отцентрованы вертикально относительно тарелки.

.desk { text-align: center;
} .plate,
.fork,
.knife { vertical-align: middle;
}

Flexbox

Чтобы выровнять тарелку, вилку и нож, мы можем использовать flexbox.

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

2. Блочные элементы

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

Абсолютно позиционируя элемент, можно центрировать его по вертикали с помощью преобразований CSS.

.plate { position: absolute; top: 50%; transform: translateY(-50%);
}

Если высота элемента известна, вы можете использовать отрицательное поле вместо позиционирования.

.plate { position: absolute; top: 50%; margin-top: -60px;
}

CSS-сетка

С помощью CSS-сетки мы можем использовать align-items, чтобы центрировать элемент по вертикали относительно его области сетки.

.desk { display: grid; align-items: center;
}

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

1. Встроенные элементы

Отступы и выравнивание текста

Мы можем комбинировать padding и text-align, чтобы центрировать элемент по горизонтали и вертикали.

.plate { text-align: center; padding-top: 24px; padding-bottom: 24px;
}

2. Другие типы элементов

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

Абсолютно расположим тарелку слева и справа.

.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}

Flexbox

Установив для justify-content и align-items — center, это легко и просто.

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

CSS-сетка

С помощью свойства place-items.

.desk { display: grid; place-items: center;
}

Автор: Ahmad Shadeed

Источник: ishadeed.com

Редакция: Команда webformyself.