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

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

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

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

375
css html

30 ответов

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

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

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

пусть браузер взять напряжение.

311

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

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

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

другой способ-создать 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 всякий раз, когда это возможно.

101

Я бы установил ваш больший div с position:relative; затем изображение этого:

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

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

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

76

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

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;
}
54

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

Рабочая Скрипку

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-переходы.

37

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

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

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

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

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }
29

Я обнаружил, что ответы 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;
}
20

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

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

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

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

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

img
{

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

Использовать Flexbox:https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

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

в div

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

@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>

ссылки: W3

9

обычно, я поставил line-height должна быть 200 пикселей. Обычно это срабатывает.

8

на пути лини-высота настройки на контейнере и использование вертикальный-выровняйте:середина на элементе изображения я, наконец, получил его для работы на 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;

    }
7

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

<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>
6

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

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

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

скрипка

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>

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

кроме того, поддержка браузера в настоящее время довольно хороша: caniuse

для кросс-браузерной совместимости для display: flex и align-items, вы можете использовать следующее:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
6

Это старое решение но акции рынка браузера продвинулись достаточно, что вы можете быть в состоянии обойтись без 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>
5

легко

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

вы можете центрировать изображение по горизонтали и вертикали с помощью кода ниже (работает в 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>
3

Я люблю прыгать на старых bandwagons!

вот обновление 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%);
}

что я делаю в последнее days is I will give a class to things I want centered and just re-use that class every time. Например:

<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:это работает для центрирования больших дивов внутри меньших дивов.

3

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

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

мы можем легко достичь этого с помощью гибкий график работы. нет необходимости фонового изображения

enter image description here

<!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>
3

спасибо всем за подсказки.

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

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}
1
.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%);
}
1

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>

по теме: центр изображения

1

Я пытался получить изображение по центру вертикально и горизонтально в форме круга с помощью 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>
1

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

img
{
   display: block;
   margin: auto;
}
0

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

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

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

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

  • должно быть 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>
0