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

Question

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

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

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

Answer 1

Простое и элегантное решение, которое работает для меня всегда:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

Answer 2

Вот попробуй это.

.parentdiv {
 height: 400px;
 border: 2px solid #cccccc;
  background: #efefef;
 position: relative;
}
.childcontainer {
 position: absolute;
 left: 50%;
 top: 50%;
}
.childdiv {
 width: 150px;
 height:150px;
 background: lightgreen;
 border-radius: 50%;
 border: 2px solid green;
 margin-top: -50%;
 margin-left: -50%;
}

<div class="parentdiv">
  <div class="childcontainer">
     <div class="childdiv">
     </div>
  </div>
</div>

Answer 3

Если вы знаете размер родительского элемента div и изображения, вы можете просто использовать абсолютное позиционирование.

Answer 4

Просто установите автоматический запас поля изображения, как показано ниже.

img{
 margin:auto;
 width:50%;
 height:auto;
}

Отметьте пример

Answer 5

https://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

Answer 6

Лучший способ отцентрировать изображение по вертикали и горизонтали, это использовать два контейнера и применить следующие свойства:

Внешний контейнер

• должно иметь display: table;

Внутренний контейнер

• должен иметь display: table-cell;
• должен иметь vertical-align: middle;
• должен иметь text-align: center;

Демо

.outer-container {
    display: table;
    width: 80%; /* can be any width */
    height: 120px; /* can be any height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.inner-container img {
    background: #fff;
    padding : 10px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>