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

Ответ 1

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

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

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

Пусть браузер возьмет на себя нагрузку.

Ответ 2

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

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

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

Ответ 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, когда это возможно.

Ответ 4

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

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

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

EDIT: обратите внимание... ваши поля отрицательной половины размера изображения.

Ответ 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;
}

Ответ 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;
}

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

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

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

Ответ 7

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

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

Здесь вы должны попробовать:

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

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Ответ 8

Я обнаружил, что ответы Valamas и Lepu выше - это самые простые ответы, которые касаются изображений неизвестного размера или известного размера, который вы бы не хотели жестко кодировать в свой 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;
}

Ответ 9

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

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

Ответ 10

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

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

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

• padding top/bottom
• позиция абсолютная
• высота строки

Ответ 11

в div

style="text-align:center; line-height:200px"

Ответ 12

В CSS сделайте это как:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

Ответ 13

@sleepy Вы можете легко сделать это, используя следующие атрибуты:

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}

<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

Ответ 14

Как правило, я устанавливаю line-height равным 200px. Обычно делает трюк.

Ответ 15

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

Выполняя комбинацию параметров line-height на контейнере и используя vertical-align: middle в элементе изображения, я, наконец, получил его для работы с FF 3.5, Safari 4.0 и IE7.0, используя следующую разметку HTML и следующий CSS.

Разметка HTML

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

Ответ 16

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

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>

Ответ 17

Другой способ (еще не упомянутый здесь) - Flexbox.

Просто установите следующие правила в контейнере div:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FIDDLE

div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div>
  <img src="http://lorempixel.com/50/50/food" alt="" />
</div>

Ответ 18

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

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

Ответ 19

Мы можем легко достичь этого, используя flex. нет необходимости в background-image.

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>

Ответ 20

Легко

img {
    transform: translate(50%,50%);
}

Ответ 21

Вы можете центрировать изображение по горизонтали и вертикали с помощью кода ниже (работает в IE/FF). Он поместит верхний край изображения ровно на 50% от высоты браузера, а верхний край (потянув половину высоты изображения вверх) будет идеально центрироваться.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

Ответ 22

Мне нравится прыгать на старых бродягах!

Здесь обновление к этому ответу 2015 года. Я начал использовать CSS3 transform для выполнения моей грязной работы для позиционирования. Это позволяет вам не делать лишний HTML, вам не нужно делать математику (поиск полуширины вещей), которую вы можете использовать на любом элементе!

Вот пример (с скрипкой в ​​конце). Ваш HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

С сопутствующим CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

В наши дни я много делаю, я дам класс тем вещам, которые хочу сосредоточить, и просто повторно использую этот класс каждый раз. Например:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

CSS

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

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

Здесь скрипка

BTW: Это работает для центрирования разделов BIGGER внутри разделов SMALLER.

Ответ 23

Я пытался получить изображение по центру по вертикали и горизонтали в форме круга, используя hmtl и css.

После объединения нескольких пунктов из этой темы вот что я придумал: jsFiddle

Вот еще один пример этого в макете из трех столбцов: jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

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

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

Ответ 24

Вы можете установить положение изображения в горизонтальном положении по горизонтали

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

Ответ 25

благодаря всем остальным для подсказок.

Я использовал этот метод

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

Ответ 26

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

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

Ответ 27

.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}

Ответ 28

div {
  position: absolute;
  
  border: 3px solid green;
  width: 200px;
  height: 200px;
}

img { 
  position: relative;
  
  border: 3px solid red;
  width: 50px;
  height: 50px;
}

.center {    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}

<div class="center">
  <img class="center" src="http://placeholders.org/250/000/fff" />
</div>

Ответ 29

Это сработало для меня. Добавьте это к изображению css:

img
{
   display: block;
   margin: auto;
}

Ответ 30

У меня была эта проблема в HTML5 с использованием CSS3, и мое изображение было сосредоточено как таковое в DIV... о да, я не могу забыть, как мне пришлось добавить высоту, чтобы показать изображение... какое-то время я подумал, где это было, пока я это не сделал. Я не думаю, что позиция и дисплей необходимы.

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;