Как на CSS сделать центрирование img внутри div по вертикали и горизонтали?
Есть div , внутри него img произвольного размера. Надо сделать так чтобы центр div и img были одинаковыми, нагляднее на картинке: Про margin: 0 auto выравнивания по горизонтали знаю, но как совместить это с вертикальным выравниванием?
Отслеживать
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
задан 10 апр 2018 в 17:06
149 1 1 золотой знак 3 3 серебряных знака 14 14 бронзовых знаков
6 ответов 6
Сортировка: Сброс на вариант по умолчанию
Можешь поизменять размеры фото здесь.
* < margin:0; padding:0; >html,body,.items < width:100%; height:100%; >.items < display:flex; align-items:center; justify-content: center; >img
Отслеживать
11.9k 5 5 золотых знаков 28 28 серебряных знаков 40 40 бронзовых знаков
ответ дан 10 апр 2018 в 17:29
user33274 user33274
6 способов центрирования элемента неизвестного размера по вертикали и горизонтали
Вариант №1: table-cell
Самый древний вариант, которым пользовались на заре Интернета и во времена рассвета табличной вёрстки. Таблицами уже давно никто не верстает, но можно имитировать их поведение через CSS ради достижения результата:
.block < height: 180px; /* for Demo only */ background: black; /* for Demo only */ display: table; width: 100%; >.block-cell
Вариант №2: position absolute
Один из моих любимых вариантов. Идеально подходит для позиционирования попапов – они должны быть поверх остального контента, а их высота никогда неизвестна, как и высота экрана пользователя.
.block < height: 180px; /* for Demo only */ background: black; /* for Demo only */ position: relative; >.block img
Вариант №3: line-height
Один из самых глупых вариантов, который хоть и подходит для выравнивание блока неизвестной высоты, но требует фиксированную высоту родителя (в других способах высота родителя указана лишь для примера). Кстати, этот способ также не подойдет для многострочного текста.
.block < background: black; /* for Demo only */ line-height: 180px; text-align: center; >.block img
Вариант №4: центрирование через псевдоэлемент
Мой самый любимый способ. Несмотря на то, что в последнее время стал использовать flexbox – выравнивание через псевдоэлемент навсегда останется в моём сердце.
.block < height: 180px; /* for Demo only */ background: black; /* for Demo only */ text-align: center; >.block:before < content: ''; height: 100%; display: inline-block; vertical-align: middle; >.block img
Вариант №5: Flexbox
Один из современных и самых простых способов центрирования – использование display: flex .
.block < height: 180px; /* for Demo only */ background: black; /* for Demo only */ display: flex; align-items: center; justify-content: center; > Вариант №6: CSS Grid
Grid – наше ближайшее и светлое будущее! Никогда прежде выравнивание блоков не была такой простой и вряд ли в скором времени что-то превзойдет CSS Grid. Хотя этот пример и похож очень на предыдущий, возможности Grid гораздо шире. В общем, если не научились работать с flexbox – можете смело его пропускать и разбираться с CSS Grid.
.block < height: 180px; /* for Demo only */ background: black; /* for Demo only */ display: grid; align-items: center; justify-content: center; >