3 способа центрирования блоков (X, Y) вертикально и горизонтально!

Показать описание

В этом видео разберем 3 способа центрирования блоков при помощи HTML и CSS. Будем выравнивать блоки вертикально и горизонтально.

#верстка #html #css #css3

Рекомендации по теме

Комментарии

Так прикольно целый день ипался с даной проблемой, и к вечеру натыкаюсь на такой видосик, спасибо за инфу

healingmeditationandrelaxa

можно при помощи grid:
.box {
width: 200px;
height: 200px;
background: green;

display: grid;
grid-template-columns: 50%;
grid-template-rows: 50%;

align-content: center;
justify-content: center;
}

.box-item {
background: red;
}

ИванИванов-уид

Ребята, попробуйте ещё так написать: родителю присвоить display:grid; place-items:center; Вот где чудо происходит. Вот где красота. Я более минимального кода не знаю, кто знает отпишитесь мне интересно посмотреть. А вообще отдельная спецификация по центрированию есть.

Erudite.

Про способ с transform первый раз услышал, интересно. Спасибо !

rtemmiroshnichenko

Да есть еще способ с помощью display: table. Когда я только начинал учить верстку, говорили что этот способ не скоро будет поддерживаться, теперь, похоже, о нем уже позабыли))) Как время летит.

SergiuBurduja-yl

только flex сработал, можно флексить))

ilromali

а если во 2м способе у картинки top и left не по 50%, то как выравнивать с помощью transform: translate3d?

mcjacksonoff

А разве какой-нибудь автопрефиксер не решает проблемы кроссбраузерности, при использовании флексбокса ?

fromillia

Эх... Прошлое... А как же самый простой способ. display: flex у контейнера и margin: auto у блока? Всего 2 свойства

TsAex

Здравствуйте! Я начинашка. Столкнулась с проблемой - не подключается CSS( Проверила код и путь 100 раз, может что-то не так делаю. Помогите, пожалуйста разобраться.
Вот код - <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>

<div class="block">
</div>

</div>
</body>
</html>

Круг у меня не появляется и квадрат не сдвигается в центр абсолютно(((

Я попробовала сбросить все коды в Liveweave - там круг появлется, но квадрат по-прежнему не движется. А вот при открытие в Chrome - совсем глухо.

ІринаНижник-ъф

Признаюсь, что о первом способе почему-то я не знал))

SergiuBurduja-yl

А зачем на флексах flex-direction ставить вообще? Для центровки он вообще не нужен.

MsGodfather

margin: 0 auto;
и
text-align: center;
???
;-D

npsheno

3 способа центрирования блоков (X, Y) вертикально и горизонтально!

3 способа центрирования блоков (X, Y) вертикально и горизонтально!...

Как быстро и легко центрировать блоки/картинки в CSS (3 способа) | Верстка HTML CSS...

5 СПОСОБОВ ВЕРТИКАЛЬНОГО ЦЕНТРИРОВАНИЯ БЛОКОВ С ПОМОЩЬЮ CSS...

CSS рецепты #1. Как центрировать блок содержимого

Топ 5 способов как выровнять блок по центру | HTML/CSS

Выравнивание блока по центру экрана на CSS по горизонтали и вертикали...

Центрирование блока в HTML #Shorts

Выравниваем блок по центру. CSS. 7 приемов - способов

4 способа как сделать косые блоки на css | Скошенные блоки...

Выравнивание блока горизонтально и вертикально в CSS | Center Block Horizontally and Vertically CSS...

Div-центрирование: абсолютное позиционирование, Flexbox и Grid...

Как отцентрировать элемент в по центру экрана CSS | 4 способа...

Как отцентровать div с помощью css #shorts

Центрирование объектов в PACKZ #packz #packzline

CSS. Выравнивание блоков по ширине

Урок 10. Размещение блоков контейнера в три колонки

Как разместить два DIV в один ряд - три способа

Как выровнять див по центру? #shorts

4 способа выровнять div вертикально HTML CSS

Выравнивание блока div со свойством position:absolute или fixed по центру....

Адаптивная верстка. Урок 3. Ширина блоков

Как правильно центрировать иконку

Урок 1 - Вертикальное выравнивание элементов по центру. 4 правильных способа верстки. #ihexy...

Bootstrap вертикальное и горизонтальное выравнивание блоков, основные классы....