Как сделать центр изображения (вертикально и горизонтально) внутри большего элемента

Question

У меня есть div 200 x 200 px. Я хочу разместить изображение размером 50 x 50 px прямо в середине div.

Как это можно сделать?

Я могу расположить его по центру по горизонтали, используя text-align: center для div. Но вертикальное выравнивание является проблемой ..

Answer 1

Работа в старых браузерах (IE> = 8)

Абсолютное положение в сочетании с автоматическим запасом позволяет центрировать элемент по горизонтали и вертикали. Позиция элемента может быть основана на позиции родительского элемента с использованием относительного позиционирования. Результат просмотра

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 2

Лично я бы поместил это как фоновое изображение в div, CSS для этого:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Предполагается, что div с id="demo", как вы уже указали height и width, добавление background не должно быть проблемой)

Пусть браузер выдержит нагрузку.

Answer 3

Другой способ, конечно, создать table с valign. Это сработает, независимо от того, знаете ли вы рост div или нет.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

, но вы всегда должны придерживаться css, когда это возможно.

Answer 4

Я бы установил ваш больший div с position:relative;, тогда для вашего изображения сделайте следующее:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Это работает только потому, что вы знаете размеры как изображения, так и содержащего div. Это также позволит вам иметь другие элементы внутри содержащего div ..., где решения, такие как использование line-height, не будут.

РЕДАКТИРОВАТЬ : Обратите внимание ... поля имеют отрицательную половину размера изображения.

Answer 5

Это работает правильно:

display: block;
margin-left: auto;
margin-right: auto 

еще попробуйте, если вышеприведенное дает только горизонтальное центрирование:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

Answer 6

вот еще один способ центрировать все внутри чего-либо.

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

HTML: (просто как всегда)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Преимущества

Высота контейнера и содержимого неизвестна.

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

Answer 7

Это немного поздно, но вот решение, которое я использую для вертикального выравнивания элементов в родительском div.

Это полезно, когда вы знаете размер контейнера div, но не размер содержащегося в нем изображения. (это часто бывает при работе с лайтбоксами или каруселями изображений).

Вот стиль, который вы должны попробовать:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Answer 8

Я обнаружил, что ответы Валамаса и Лепу, приведенные выше, являются наиболее прямыми ответами, касающимися изображений неизвестного размера или известного размера, которые вы не хотели бы жестко кодировать в своем CSS. У меня есть несколько небольших настроек: удалите нерелевантные стили, измените размер до 200px, чтобы соответствовать вопросу, и добавьте max-height / max-width для обработки изображений, которые могут быть слишком большими.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Answer 9

Использование Flexbox :

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

Answer 10

Vertical-align является одним из наиболее неправильно используемых стилей CSS. Это не работает так, как вы можете ожидать от элементов, которые не являются td или css "display: table-cell".

Это очень хороший пост по этому вопросу. http://phrogz.net/CSS/vertical-align/index.html

Наиболее распространенные методы для достижения того, что вы ищете:

• набивка сверху / снизу
• абсолютная позиция
• высота строки