Ответ
Для центрирования блочного элемента по горизонтали можно использовать несколько способов:
- margin: auto (если известна ширина элемента):
.block {
width: 300px;
margin: 0 auto;
}- Flexbox (современный способ):
.parent {
display: flex;
justify-content: center;
}- Grid:
.parent {
display: grid;
place-items: center;
}- Абсолютное позиционирование (если нужно центрировать по вертикали и горизонтали):
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Для вертикального центрирования лучше всего подходят Flexbox или Grid.
Ответ 18+ 🔞
А, ну вот, опять этот вечный вопрос, как поставить эту ёбаную коробку по центру, да? Ну, слушай сюда, я тебе сейчас разложу, как гнилую картошку, все эти способы. Только не перепутай, а то потом будешь плакать, что у тебя всё плывёт, как говно в проруби.
Первый способ, классический, для дедов, которые ещё на таблицах верстали. Если ты знаешь, сколько пикселей в ширину твоя хрень, то просто делаешь так:
.block {
width: 300px;
margin: 0 auto;
}Вот и вся магия, блядь. auto по бокам — и браузер сам раскидает пространство. Но если ширины нет — нихуя не выйдет, он просто растянется. Помни это, как «Отче наш».
Дальше идёт моднявый способ, на котором сейчас все помешались — Flexbox. Тут всё просто, как три копейки:
.parent {
display: flex;
justify-content: center;
}Вот и всё, ёпта! Родителю дал flex, а потом сказал: «Выровняй всё по центру, сука!» (justify-content: center). И он послушно выстроит всех детишек в рядок по середине. Для вертикального центрирования ещё align-items: center добавь — и будет тебе счастье, овердохуищное!
Третий вариант — Grid, он ещё мощнее, но иногда как из пушки по воробьям. Зато одной строчкой:
.parent {
display: grid;
place-items: center;
}place-items: center — это как волшебная палочка, хуй с горы! И по горизонтали, и по вертикали всё прибьёт к центру. Красота, блядь!
Ну и последний, самый отчаянный способ, когда уже всё поехало крышей — абсолютное позиционирование. Например, если тебе нужно центрировать окошко поверх всего дерьма. Делаешь так:
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Смысл в чём: ставишь левый верхний угол блока ровно в центр экрана (top: 50%; left: 50%;), а потом сдвигаешь весь блок назад на половину его собственных размеров (transform: translate(-50%, -50%)). Получается идеальный центр, даже если ты не знаешь, каких размеров твой блок. Хитро, да? Почти как мартышлюшка с гранатой.
Так что выбирай, что тебе ближе по душе, и не выёбывайся слишком. Главное — чтобы работало, а не как у того Герасима, который Муму утопил, блядь.