Как выровнять изображение по вертикали внутри div

1457

Как вы можете выровнять изображение внутри содержимого div?

пример

В моем примере мне нужно вертикально центрировать <img>в " <div>с class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameВысота фиксирована, а высота изображения неизвестна. Я могу добавить новые элементы, .frameесли это единственное решение. Я пытаюсь сделать это в Internet Explorer 7 и более поздних версиях, WebKit, Gecko.

Смотрите jsfiddle здесь .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Арно Ле Блан
источник
3
Здравствуйте, извините, но я не согласен с тем, что использование помощника является наиболее ценным решением. Но это не единственный способ. Другие же поддерживаются браузерами. Я предлагаю решение здесь внизу stackoverflow.com/a/43308414/7733724 и W3C.org по поводу информации. Вы можете проверить. Приветствия
Сэм
Будет полезна статья о централизованном
чтении
Прекрасное руководство для выравнивания css-tricks.com/centering-css-complete-guide
Майкл Юрин

Ответы:

2128

Единственное (и лучший кросс-браузер) способ , как я знаю , является использование inline-blockпомощника с height: 100%и vertical-align: middleна обоих элементах.

Так что есть решение: http://jsfiddle.net/kizu/4RPFa/4570/

Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не возражаете против использования выражений Internet Explorer, вы можете использовать псевдоэлемент и добавить его в Internet Explorer с помощью удобного выражения, которое выполняется только один раз для каждого элемента так что проблем с производительностью не будет:

Решение с :beforeи expression()для Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/


Как это работает:

  1. Когда у вас есть два inline-blockэлемента рядом друг с другом, вы можете выровнять друг друга по сторонам, так что vertical-align: middleвы получите что-то вроде этого:

    Два выровненных блока

  2. Когда у Вас есть блок с фиксированной высотой (в px, emили другой абсолютной единицей), вы можете установить высоту внутренних блоков %.

  3. Таким образом, добавив к нему один inline-blockс height: 100%в блоке с фиксированной высотой будет выравнивать другой inline-blockэлемент в ней ( <img/>в вашем случае) вертикально рядом с ним.
Киз
источник
2
Вы можете убедиться сами: jsfiddle.net/kizu/Pw9NL - только встроенные блоки не генерируют блок, но все остальные случаи работают нормально.
Кизу
3
Очень хороший ответ Я боролся с пробелами между элементами встроенного блока, то есть между .frameи .frame:before. Предлагаемое здесь решение - добавить margin-left: -4pxв .frame. Надеюсь это поможет.
Мик
111
ОБРАТИТЕ ВНИМАНИЕ, что: <img src=""/>НЕ находится внутри <span></span>добавленного помощника. Это снаружи. Я просто потянул каждую прядь моих волос, не осознавая этого.
Райан
50
Похоже, вам также нужно добавить «пробел: nowrap;» к кадру, или вы столкнетесь с проблемой, если у вас есть разрыв строки между вашим изображением и вспомогательным пролетом. Мне потребовался час, почему это решение не работало для меня.
Juminoz
2
В моем случае для моего изображения были установлены значения max-height и max-width, равные 100%, поэтому изображение масштабировало контейнер, и этот метод не работал. Мое решение состояло в том, чтобы изменить эти значения до 90% (что в моем случае было нормально; в другой ситуации вам может потребоваться соответственно масштабировать контейнер), а также добавить вспомогательный элемент на другую сторону изображения, чтобы отступы оставались равномерными. обе стороны.
Эрик Дубе
513

Это может быть полезно:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}
Тахир Ясин
источник
74
Если вы также хотите выровнять изображение по горизонтали, добавьте влево: 0; справа: 0; img
jameskind
это один не работает в IE10? Я как бы использую это повсюду
Макс Яри
Также работает (для меня) с контейнером div, имеющимposition:fixed;
PJ Brunet
1
Самое простое и чистое решение, спасибо!
KDT
Спасибо! Работал для меня!
Александр Малыгин
486

Решение matejkramny - хорошее начало, но негабаритные изображения имеют неправильное соотношение.

Вот моя вилка:

Демонстрация: https://jsbin.com/lidebapomi/edit?html,css,output

предварительный просмотр


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
йомо
источник
Есть ли способ приспособить это так, чтобы вы могли увеличить увеличенное изображение, скажем, в 2 раза, и оно все равно оставалось бы по центру по горизонтали и вертикали?
Джастин
Если мы хотим, чтобы это работало для вертикального выравнивания дна вместо среднего, какие коды следует изменить?
bobo
1
@ бобо просто удали top: 0;. Это приводит к тому, bottom: 0;что применяется только вертикально.
Джомо
Лучший ответ!
user315338
278

Трехстрочное решение:

position: relative;
top: 50%;
transform: translateY(-50%);

Это относится ко всему.

От сюда .

Хорхе Орпинель
источник
Префиксы: -ms- или -webkit- (до преобразования). w3schools.com/cssref/css3_pr_transform.asp
Хорхе Орпинель,
3
Префиксы для IE9, но не работают вообще в IE8 и ниже: caniuse.com/#search=transform Но мое мнение: меня не волнует IE8
Reign.85
Никто не заметил, что происходит, когда центруемый ребенок выше экрана устройства, а родитель - первый ребенок в DOM ...?
дао
3
Хороший, когда вы не можете использовать, position: absolute;потому что вам нужна плавная ширина.
plong0
2
Лучшее решение, даже лучшее, чем flexbox, с поддержкой большинства современных и старых браузеров. Подтвердите это, пожалуйста
albanx
142

Чистое решение CSS:

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Ключевые вещи

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
Матей
источник
Пожалуйста , дайте мне направить вас на руководство здесь работает даже для IE5 (вычитая из того, что я читал до сих пор в должности) webmasterworld.com/css/3350566.htm
Матей
Это хорошее начало, но размер негабаритных изображений изменяется с неправильным соотношением . Пожалуйста, смотрите мой ответ.
Джомо
@ HansWürstchen да, но дело в том, чтобы выяснить, не слишком ли велик он - выбор дизайна. Добавление большего css = больше беспорядка :)
Matej
1
@matejkramny не становится слишком большим. если изображение является слишком большим, он имеет неправильное соотношение. это означает, что он растянут по высоте и выглядит неправильно.
Джомо
✔ Вау, это работает с переполненными изображениями (больше, чем обертка), принятый ответ - нет.
Седрик Райхенбах
120

Для более современного решения, и если нет необходимости поддерживать устаревшие браузеры, вы можете сделать это:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Вот ручка: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Рикардо Зеа
источник
3
Это особенно полезно, если высота контейнера не установлена
Дейв Барнетт
или align-selfдля отдельных предметов
Майкл
Проблема align-selfв том, что гибкие элементы будут растягивать высоту родительского контейнера.
Рикардо
101

Таким образом, вы можете центрировать изображение по вертикали ( демо ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}
Питер Мортенсен
источник
4
Странно, я не мог получить принятый ответ, чтобы работать в моей ситуации (я также обрезал изображение с переполнением: скрытый). Хотя это сработало идеально.
Лука Спиллер
3
Я тестировал это только в Chrome, но ключевой является высота строки. Я поместил атрибут вертикального выравнивания в div, а не в img, так как мой img находится внутри якоря (<a/>).
Тодд Прайс
1
Да, намного проще принятого решения и прекрасно работает. Я также нашел это решение в jsfiddle.
vdboor
1
Если вы знаете, какую высоту обслуживать, это работает довольно хорошо
KrekkieD
Из моего опыта это решение работает только font-size: 0для div. Для довольно больших контейнеров вы можете пропустить это, но если у вас div100px и img 80px, то это будет на несколько пикселей ниже.
alTus
38

Также вы можете использовать Flexbox для достижения правильного результата:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

жгут
источник
28

Есть супер простое решение с flexbox!

.frame {
    display: flex;
    align-items: center;
}
BBlackwo
источник
5
Да, но вы вряд ли увидите это во всех ответах. Я пытался выделить это просто и четко, поскольку это гораздо более простое решение, чем все остальные ответы.
BBlackwo
Это лучший ответ, который также работал для меня. Но в моем случае в кадре «inline-flex» работал лучше для меня. и для изображения внутри него я добавил: "vertical-align: middle".
Софи Куперман
22

Вы можете попробовать установить CSS для PI в display: table-cell; vertical-align: middle;

Yeodave
источник
Я видел различные методы, но этот был новым (даже в 2013 году) для меня.
Майк Эберт
Лучше, чем положить изображение в таблицу, чтобы просто отцентрировать его.
Jonats
3
display: ячейка таблицы не всегда имеет правильный размер, если вы хотите, чтобы ее ширина составляла 100%
Redtopia
1
Что такое " PI"?
Питер Мортенсен
18

Вы можете попробовать следующий код:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Сантош Халсе
источник
14

Решение для фонового изображения

Я полностью удалил элемент изображения и установил его в качестве фона элемента div с классом .frame

http://jsfiddle.net/URVKa/2/

По крайней мере, это отлично работает в Internet Explorer 8, Firefox 6 и Chrome 13.

Я проверил, и это решение не будет работать, чтобы сжать изображения размером более 25 пикселей. Есть свойство под названиемbackground-size которое устанавливает размер элемента, но это CSS 3, который будет противоречить требованиям Internet Explorer 7.

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

Бенджамин Удинк тен Кейт
источник
Очень хорошее решение, однако я ожидаю, что некоторые изображения будут больше контейнера, и в этом случае я планировал использовать для них max-height / max-width. Есть ли способ сделать это с фоновыми изображениями?
Арно Ле Блан
это не «элемент .frame», это «div с классом .frame»
JGallardo
Если высота изображения не превышает высоту кадра div, это лучшее и простое решение ...
efirat
13

Представь, что у тебя есть

<div class="wrap">
    <img src="#">
</div>

И CSS:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
fdrv
источник
СХ! Flex действительно рулзззз! Спасибо!
Педро Феррейра
используйте объектно-подобранное покрытие, если хотите, чтобы ребенок занимал всю ширину родительского элемента и при этом выровнялся по центру по вертикали. См. Css-tricks.com/snippets/css/a-guide-to-flexbox, чтобы переместить изображение в родительском объекте с помощью flex-box
mattdlockyer
11

Вы могли бы сделать это:

демонстрация

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    


JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
Джозеф Марикл
источник
Ницца. Есть ли шанс для чистого решения CSS?
Арно Ле Бланк
К сожалению, нет, если вы не хотите использовать таблицы или отказаться от совместимости со старыми версиями IE. :( Если бы вы знали точный размер изображений перед этим, он был бы другим, но не без этого это было бы невозможно только с помощью CSS.
Джозеф Марикл
@Joseph Как бы вы исправить это с помощью таблиц?
Бенджамин Удинк тен Кейт
@Benjamin Udink ten Cate Это грязно, но это можно сделать следующим образом: jsfiddle.net/DZ8vW/2 (это не рекомендуется, но должно работать)
Джозеф Марикл
1
Ну, это подходит для нужд Арно отлично. Нет JS, только CSS и HTML.
Бенджамин Удинк тен Кейт
11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Ключевое свойство display: table-cell;для .frame. Div.frameотображается как встроенный в этом, так что вам нужно обернуть его в элемент блока.

Это работает в Firefox, Opera, Chrome, Safari и Internet Explorer 8 (и более поздних версиях).

ОБНОВИТЬ

Для Internet Explorer 7 нам нужно добавить выражение CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
Webars
источник
Отлично. Любой взлом для IE7, который бы избежать Javascript?
Арно Ле Бланк
Я не уверен, но, возможно, выражения CSS помогут. Но они тоже javascript. Разница лишь в том, что вы пишете их в CSS-файлах, а не в JS.
Веб-
Да, хорошая идея Это было бы более управляемым (скрипт запускается автоматически по мере необходимости), и, поскольку он должен быть только для IE7, все в порядке.
Арно Ле Блан
7

Мое решение: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}
Илья Лысенко
источник
7

Это работает для современных браузеров (2016 во время редактирования), как показано в этой демонстрации на codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Очень важно, чтобы вы либо присваивали изображениям класс, либо использовали наследование для нацеливания на изображения, которые вам нужно отцентрировать. В этом примере мы использовали .frame img {}так, чтобы .frameнацеливались только изображения, завернутые в div с классом .

anglimasS
источник
только ie7, просто поместите высоту строки: 25px;
AnglesmasS
1
кажется, что он не выровнен должным образом даже на firefox и chrome ( jsfiddle.net/4RPFa/19 )
Арно Ле Бланк
7

Попробуйте это решение с чистым CSS http://jsfiddle.net/sandeep/4RPFa/72/

Может быть, это главная проблема с вашим HTML. Вы не используете кавычки, когда определяете c lass& image heightв своем HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Когда я работаю с imgтегом, он оставляет от 3 до 2 пикселей top. Теперь я уменьшаюline-height , и это работает.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

line-heightСвойство оказывается по- разному в разных браузерах. Итак, мы должны определить разные line-heightбраузеры свойств.

Проверьте этот пример: http://jsfiddle.net/sandeep/4be8t/11/

Посмотрите на этот пример на примере line-heightразных браузеров: различия в высоте ввода в Firefox и Chrome

Сандип
источник
2
Не работает (по крайней мере, в Firefox). Для пропущенных кавычек это разрешено в HTML5 (хотя я не знаю, какой тип документа используется в jsfiddle)
Арно Ле Блан
7

Я не уверен , что Internet Explorer, но в Firefox и Chrome, если у вас есть imgв divконтейнере, следующее содержание CSS должно работать. По крайней мере, для меня это работает хорошо:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}
Slava
источник
IE8 +, к сожалению. Хорошо для меня, но, возможно, не для других.
TheCarver
также обратите внимание, что display:table-cell;% не принимает ширину
Mutmatt
7

Решение с использованием таблицы и ячеек таблицы

Иногда это должно быть решено отображением в виде таблицы / таблицы-ячейки. Например, быстрый заголовок экрана. Это рекомендуемый способ W3 также. Я рекомендую вам проверить эту ссылку, которая называется Центрирование блока или изображения с W3C.org.

Советы, используемые здесь:

  • Контейнер абсолютного позиционирования отображается в виде таблицы
  • Выровнено по вертикали к центру содержимого, отображаемого как ячейка таблицы

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Лично я действительно не согласен с использованием помощников для этой цели.

Сэм
источник
6

Простой способ, который работает для меня:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Это работает для Google Chrome очень хорошо. Попробуйте это в другом браузере.

DOCTYPE HTML
источник
6

Для центрирования изображения внутри контейнера (это может быть логотип), кроме текста вроде этого:

Введите описание изображения здесь

В основном вы оборачиваете изображение

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

juliangonzalez
источник
4

Если вы можете жить с полями в пикселях, просто добавьте font-size: 1px;к .frame. Но помните, что теперь на .frame1em = 1px, а это значит, вам нужно также установить поле в пикселях.

http://jsfiddle.net/feeela/4RPFa/96/

Теперь это больше не по центру в Опере ...

feeela
источник
3

У меня такая же проблема. Это работает для меня:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>
algreat
источник
на самом деле «позиция: фиксированная» на изображении работала для меня, когда я был разочарован многочисленными ложными ответами людей, предлагающих метод табличных ячеек, который не работал в соседстве с моими работами. С помощью метода, предложенного algreat, вам также не нужен дополнительный контейнер.
Василиос Паспалас
2

Вы можете использовать это:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }
Масумех Карвар
источник
1

Использование tableи table-cellmethod делают работу, особенно потому, что вы нацелены и на некоторые старые браузеры, я создаю для вас фрагмент, который вы можете запустить и проверить результат:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Алиреза
источник
0

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

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}
svnm
источник
0

Лучшее решение заключается в том, что

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}
Кумар
источник
0

Используйте это:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

И вы можете варьироваться font-size.

th3pirat3
источник
0

Хотите выровнять изображение, которое имеет после текста / заголовка и оба внутри div?

Смотрите на JSfiddle или Run Code Snippet.

Просто убедитесь, что у вас есть идентификатор или класс для всех ваших элементов (div, img, title и т. Д.).

Для меня это решение работает во всех браузерах (для мобильных устройств вы должны адаптировать свой код с помощью: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}
<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

mariusfv
источник