Выровняйте изображение по центру и середине внутри div

302

У меня есть следующий div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

Как выровнять изображение так, чтобы оно находилось посередине и в центре div?

Dro1n2
источник
12
Дубликат задан 2 минуты назад: CSS: изображение посередине
Pekka
1
Подобная тема здесь: stackoverflow.com/questions/18516317/…
Хашем Колами
Попробуйте выбрать один ответ как правильный.
Максонк,

Ответы:

406

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

JSFiddle

Гурприт Сингх
источник
4
display: block;была моя ловушка TnX
Сингх
2
Следование не работает. Какую ошибку я делаю. <html> <head> <style> #over img {display: block; поле слева: авто; поле справа: авто; } </ style> </ head> <body> <div id = "over" style = "position: absolute; ширина: 100%; высота: 100%"> <img src = " img8a.flixcart.com/image/ таблетка / f / k / t /… "> </ div> </ body> </ html>
nizam.sp
1
Если мы не используем display: blockпо умолчанию, это в display: inlineсоответствии с w3schools.com/cssref/pr_class_display.asp . Почему мы должны использовать блок? Я работал на меня, но не уверен, почему блок будет центрировать IMG и встроенный не будет.
user3731622
потому что inline не перемещаются по линии, это действительно так. поэтому маржа авто неэффективна.
netalex
12
Это не выравнивается по вертикали
alpadev
170
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
Джон К.
источник
6
топ ответ, очень полезно!
Илиан Андреев
1
Очень короткое и простое решение, но, похоже, оно работает только с фиксированной, непроцентной шириной и высотой. Он работает с поплавками, хотя +1 для этого. - jsfiddle.net/2s2nY/2
магнетронни
1
но это только вертикальное выравнивание, а не горизонтальное право?
V-SHY
1
Это не будет работать, если ширина изображения больше ширины div.
Давуз
5
Если мы уберем display: table-cell; это работает идеально.
Ахесанали Сутар
103

Это также можно сделать с помощью макета Flexbox:

СТАТИЧЕСКИЙ РАЗМЕР

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}
<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

ДИНАМИЧЕСКИЙ РАЗМЕР

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}
<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

В этой статье я нашел пример , который отлично объясняет, как использовать макет.

aerdman
источник
В статическом размере нет необходимости в ширине и высоте для ребенка (по крайней мере, в моей версии Firefox).
Родриго
91

Мне кажется, вы также хотели, чтобы это изображение было вертикально центрировано внутри контейнера. (Я не видел никакого ответа, который обеспечил бы это)

Рабочая скрипка:

  1. Чистое решение CSS
  2. Не нарушая поток документов (без плавающих или абсолютного позиционирования)
  3. Кросс-браузерная совместимость (даже IE6)
  4. Полностью отзывчивый.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Примечание: это решение хорошо для выравнивания любого элемента внутри любого элемента. для IE7, при применении .Centeredкласса к элементам блока, вам придется использовать другой прием, чтобы получить inline-blockработу. (это потому, что IE6 / IE7 не очень хорошо работают со встроенным блоком на элементах блока)

avrahamcool
источник
Вместо того span, чтобы иметь дополнительные , вы можете использовать псевдоэлемент:before : jsfiddle.net/xaliber/cj6zhtp0
deathlock
@ deathlock это хорошо известно. но я предназначался для старых браузеров IE (которые не поддерживали псевдоэлементы).
Avrahamcool
1
Это не так, но HTML должен использоваться только для структуры, а не для представления. Эта работа оставлена ​​для CSS, отсюда и псевдоэлемент.
Deathlock
1
Что вы имеете в виду "Не нарушая поток документов (без плавающих или абсолютного позиционирования)" ?? Что за #over { position:absolute; width:100%; height:100%;?
Родриго
1
@Rodrigo действительно, если вам не нужно ориентироваться на старые браузеры, этот flexbox - рекомендуемый подход.
avrahamcool
32

Вы можете сделать это легко с помощью свойства display: flex css

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
загар Ахмад Дар
источник
Это тот, кто работает на меня. Изображение глубоко вложено в PUG / SCSS. Спасибо.
Могенс TrasherDK
29
#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
дхир
источник
Это правильный ответ, который на самом деле центрируется как вертикально, так и горизонтально.
Александр Ким
Лучший ответ на данный момент.
Киран Пуппала
13

У меня все еще были некоторые проблемы с другим решением, представленным здесь. Наконец это сработало лучше для меня:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

CSS3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

Вы можете прочитать больше об этом подходе на этой странице .

pawel7318
источник
Мне также пришлось добавить родительский CSS, но ваш код работал отлично! положение: относительное; ширина: 100%; плыть налево; переполнение: скрытое; минимальная высота: 189 пикселей;
user2593040 9.12.16
10

По сути, установка правого и левого полей на авто приведет к выравниванию изображения по центру.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
Garconis
источник
8

Это был бы более простой подход

#over > img{
    display: block;
    margin:0 auto; 
}
Суджай Шридхар
источник
7

Ответ Daaawx работает, но я думаю, что было бы чище, если бы мы исключили встроенный CSS.

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

LizardKG
источник
6

установка img для отображения: inline-block, в то время как для улучшенного div установлено значение text-align: center тоже сделает эту работу

РЕДАКТИРОВАТЬ: для тех, кто играет с дисплеем: inline-block >>> не забывайте, что, например, два div как

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

действительно нет пробелов между ними (как видно здесь).

Просто базовый, чтобы избежать этих (присущих встроенному блоку) промежутков между ними. Эти пробелы можно увидеть между каждыми двумя словами, которые я пишу прямо сейчас! :-) Так что .. надеюсь, это поможет некоторым из вас.

саша
источник
6

ПРОСТО. 2018. FlexBox. Чтобы проверить поддержку браузера - могу ли я использовать

минимальное решение:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}


Чтобы получить максимально широкую поддержку браузера:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}
Надав
источник
5

Я перепробовал много подходов, но только этот работает для нескольких встроенных элементов внутри контейнера div. Вот код для выравнивания всего в div в середине.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Пример кода здесь: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Yogee
источник
5

CSS-файл

.over {
    display : block;
    margin : 0px auto;
Sabarish R
источник
3

Попробуйте этот минимальный код:

<div class="outer">
    <img src="image.png"/>
</div>

И CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}
luchopintado
источник
3

Ну, мы в 2016 году ... почему бы не использовать flexbox? Это также отзывчиво. Наслаждаться.

#over{
display:flex;
align-items:center;
justify-content:center;
}
<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

GabMic
источник
1
Люблю css3! Спасибо. Тем не менее, хорошо отметить, что это будет работать только в современных браузерах (кроме IE). Все остальные браузеры не будут иметь никакого эффекта.
Нил
2

многие ответы предлагают использовать, margin:0 autoно это работает только тогда, когда элемент, который вы пытаетесь сделать центрированным, не плавает слева или справа, то есть floatатрибут css не установлен. Для этого примените displayатрибут к, table-cellа затем примените поля слева и справа к авто, чтобы ваш стиль выглядел следующим образомstyle="display:table-cell;margin:0 auto;"

Викас Девде
источник
2
    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>
betty.88
источник
2

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}
Лахори
источник
Лучше всего, если вы добавите комментарий, а не просто добавите туда код.
Паркаш Кумар
2

Для центра горизонтально Просто положите

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Другой метод:

#over img {
    display: inline-block;
    text-align: center;
}

Для центра по вертикали Просто положите:

   #over img {

           vertical-align: middle;
        }
Санджиб Дебнатх
источник
2

Это сработало для меня:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}
Sileria
источник
2

это помогло мне.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Примечание: в этом случае нет класса CSS, связанного с' BrandImage '

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}
julian9876
источник
2

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

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
Акшай Банде
источник
1

Используйте позиционирование. Следующее сработало для меня ...

С увеличением до центра изображения (изображение заполняет div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Без увеличения до центра изображения (изображение не заполняет div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
ThomasAFink
источник
1

Отмеченный ответ для этого не выровняет изображение по вертикали. Подходящим решением для современных браузеров является flexbox. Гибкий контейнер можно настроить для выравнивания его элементов как по горизонтали, так и по вертикали.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>
WDuffy
источник
Это решение отвечает на вопрос и работает, в отличие от отмеченного ответа. Возможно, избиратель мог детализировать свое решение понизить голос?
WDuffy
6
Из очереди просмотра : Могу ли я попросить вас добавить контекст вокруг вашего исходного кода. Ответы только на код трудно понять. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост.
RBT
1
Это не оправдывает отрицание. Ответ технически правильный и поможет будущим читателям. Я обновил тело ответа, чтобы соблюдать правила внутреннего распорядка, но, возможно, основная команда должна реализовать более прямое решение, поскольку идентификация ответов только с помощью кода является тривиальной задачей.
WDuffy
0

Вы можете взглянуть на это решение:

Центрирование изображения по горизонтали и вертикали

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
fpauer
источник
0

Простой способ - создать отдельные стили как для div, так и для изображения, а затем расположить их независимо друг от друга. Скажем, если я хочу установить мое положение изображения на 50%, то у меня будет код, который выглядит следующим образом ...

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}
<div id="over">
 <img src="img.png" id="img">
</div>

KSJ10
источник
Просто скажите мне, работает ли он со всеми видами браузеров, хотя это базовая вещь, которую должен поддерживать каждый браузер (в противном случае не называйте это браузером)
KSJ10
0
#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Измените значение высоты в соответствии с вашими потребностями.

Терри Лин
источник
0

Это должно работать.

ВАЖНО ДЛЯ ТЕСТИРОВАНИЯ: Для запуска фрагмента кода нажмите левую кнопку Фрагмент кода RUN , а затем правую ссылку Полная страница

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}
<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

Intacto
источник