Jak zrobić środek obrazu (pionowo i poziomo) wewnątrz większego div

Praca w starych przeglądarkach (IE >= 8)

Pozycja absolutna w połączeniu z automatycznym marginesem pozwala wyśrodkować element w poziomie i pionie. Pozycja elementu może być oparta na pozycji elementu nadrzędnego przy użyciu pozycjonowania względnego. Zobacz Wynik

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

Innym sposobem jest oczywiście utworzenie table z valign. To zadziała niezależnie od tego, czy znasz wysokość div, czy nie.

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

Ale zawsze powinieneś trzymać się tylko css Kiedy to możliwe.

Ustawiłbym twój większy div z {[1] } wtedy dla Twojego obrazka zrób to:

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

To działa tylko dlatego, że znasz wymiary zarówno obrazu, jak i zawierającego div. To również pozwoli Ci mieć inne elementy wewnątrz div zawierające... gdzie rozwiązania takie jak stosowanie wysokości linii nie będą.

EDIT : Uwaga... marginesy są ujemne w połowie rozmiaru obrazu.

To działa poprawnie:

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

W przeciwnym razie spróbuj tego, jeśli powyższe daje tylko poziome centrowanie:

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

Oto inna metoda, aby wyśrodkować wszystko w czegokolwiek.

Working Fiddle

HTML: (simple as ever)

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

Korzyści

Wysokość pojemnika i zawartości nie są znane.

Centrowanie bez określonego ujemnego marginesu, bez ustawiania wysokości linii (więc działa dobrze z wieloma wierszami tekstu) i bez skryptu, działa również świetnie z przejściami CSS.

To nadchodzi trochę późno, ale oto rozwiązanie, którego używam do wyrównywania pionowego elementów w nadrzędnym div.

Jest to przydatne, gdy znasz rozmiar kontenera div, ale nie rozmiar zawartego obrazu. (często ma to miejsce podczas pracy z lightboxami lub karuzelami obrazu).

Oto stylizacja, którą powinieneś wypróbować:

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

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Odkryłem, że powyższe odpowiedzi Valamasa i Lepu są najprostszymi odpowiedziami, które dotyczą obrazów o nieznanej wielkości lub znanej wielkości, które wolałbyś nie kodować twardo w CSS. Mam tylko kilka małych poprawek: Usuń nieistotne Style, rozmiar go do 200px, aby dopasować pytanie, i dodać max-height/max-width do obsługi obrazów, które mogą być zbyt duże.

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

Vertical-align jest jednym z najczęściej używanych stylów css. Nie działa to tak, jak można oczekiwać na elementach, które nie są td lub css "display :table-cell".

To jest bardzo dobry post w tej sprawie. http://phrogz.net/CSS/vertical-align/index.html

Najczęstsze metody osiągnięcia tego, czego szukasz, to:

• padding góra / dół
• pozycja absolutna
• line-height

W CSS zrób to jako:

img
{

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

Użyj 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
          }

W div

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

@ sleepy możesz to łatwo zrobić używając następujących atrybutów:

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

Referencje: W3

Zazwyczaj ustawiam line-height Na 200px. Zazwyczaj działa.

Mam galerię zdjęć, dla których nie znam dokładnych wysokości ani szerokości zdjęć, wiem tylko, że są one mniejsze niż div, w którym mają być zawarte.

Wykonując kombinację ustawień line-height na kontenerze i używając vertical-align:middle na elemencie obrazu, w końcu dostałem go do pracy na FF 3.5, Safari 4.0 i IE7.0 używając następujących znaczników HTML i następujących CSS.

HTML Markup

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

    }

To działa dla mnie:

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

Innym sposobem (jeszcze nie wspomnianym tutaj) jest Flexbox .

Wystarczy ustawić następujące zasady na kontenerze 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>

W dzisiejszych czasach obsługa przeglądarek jest całkiem dobra: caniuse

Dla kompatybilności między przeglądarkami dla display: flex i align-items, możesz użyć:

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;

Jest to stare rozwiązanie, ale udziały w rynku przeglądarek są na tyle zaawansowane, że możesz być w stanie obejść się bez części IE hack, jeśli nie martwisz się degradacją dla IE7. Działa to, gdy znasz wymiary zewnętrznego kontenera, ale możesz lub nie znasz wymiarów wewnętrznego obrazu.

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

Easy

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

Możesz wyśrodkować obraz w poziomie i pionie za pomocą poniższego kodu (działa w IE/FF). Ustawi górną krawędź obrazu dokładnie na 50% wysokości przeglądarki, a margin-top (wyciągając połowę wysokości obrazu w górę) wyśrodkuje ją idealnie.

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

Uwielbiam skakać po starych bandwagonach!

Oto aktualizacja 2015 Do tej odpowiedzi. Zacząłem używać CSS3 transform do brudnej roboty przy pozycjonowaniu. Dzięki temu nie musisz robić żadnego dodatkowego HTML' a ,nie musisz robić matematyki (znajdując pół szerokości rzeczy) możesz go użyć na dowolnym elemencie!

Oto przykład (ze skrzypcami na końcu). Twój HTML:

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

Z towarzyszącym 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%);
}

W dzisiejszych czasach często robię to, że daję lekcję rzeczom, które chcesz wyśrodkować i po prostu ponownie korzystać z tej klasy za każdym razem. Na przykład:

<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%);
}

Oto skrzypce

BTW: działa to również do centrowania większych div wewnątrz mniejszych div.

Możesz ustawić pozycję obrazu jako align center horizontal za pomocą tego

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

Możemy to łatwo osiągnąć za pomocą flex . nie ma potrzeby tworzenia obrazu tła

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

Dzięki wszystkim za wskazówki.

Użyłem tej metody

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

.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%);
}

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>

Powiązane: Wyśrodkuj obraz

Starałem się, aby obraz był wyśrodkowany pionowo i poziomo w kształcie okręgu za pomocą HMTL i css.

Po połączeniu kilku punktów z tego wątku, oto co wymyśliłem: jsFiddle

Oto kolejny przykład tego w układzie trzech kolumn: 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>

To mi pomogło. Add this to image css:

img
{
   display: block;
   margin: auto;
}

Miałem ten problem w HTML5 przy użyciu CSS3 i mój obraz był wyśrodkowany jako taki w DIV... o tak, nie mogę zapomnieć, jak musiałem dodać wysokość, aby pokazać obraz... przez chwilę zastanawiałem się, gdzie to jest, dopóki tego nie zrobiłem. Nie sądzę, aby pozycja i wyświetlacz były konieczne.

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

Najlepszym sposobem wyśrodkowania obrazu w pionie i poziomie jest użycie dwóch kontenerów i zastosowanie następujących właściwości:

The outher container

• powinien mieć display: table;

Pojemnik wewnętrzny

• powinien mieć display: table-cell;
• powinien mieć vertical-align: middle;
• powinien mieć text-align: center;

Demo

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