To może być przydatne:

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

Odniesienie: http://www.student.oulu.fi / ~ laurirai / www / css / middle /

Rozwiązanie Matejkramny to dobry początek, ale za duże obrazy mają zły stosunek.
Oto mój widelec:

Demo: https://jsbin.com/lidebapomi/edit?html, css, output

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

Rozwiązanie 3 linii:

position: relative;
top: 50%;
transform: translateY(-50%);

Z tutaj .

Czyste rozwiązanie CSS:

Http://jsfiddle.net/3MVPM/

CSS:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

Kluczowe rzeczy

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

W ten sposób możesz wyśrodkować obraz w pionie (demo):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

Dla tych, którzy wylądowali na tym poście i są zainteresowani bardziej nowoczesnym rozwiązaniem, a którzy nie mają potrzeby obsługi starszych przeglądarek, możesz to zrobić:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Oto Długopis: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Możesz spróbować ustawić CSS PI na display: table-cell; vertical-align: middle;

Istnieje super łatwe rozwiązanie z flexbox!

.frame {
    display: flex;
    align-items: center;
}

Background image solution Usunąłem element obrazka i ustawiłem go jako tło div z klasą .frame

Http://jsfiddle.net/URVKa/2/

To przynajmniej działa dobrze na IE8, FF6 i Chrome13

Sprawdziłem, to rozwiązanie nie będzie działać, aby zmniejszyć obrazy większe niż 25px wysokość. Istnieje właściwość o nazwie background-size, która ustawia rozmiar elementu, ale to CSS3 jest w konflikcie z wymaganiami IE7.

I wouldd radzi ci albo zmienić priorytety przeglądarki i zaprojektować najlepsze dostępne przeglądarki, albo uzyskać kod serwera, aby zmienić rozmiar obrazów, jeśli chcesz użyć tego rozwiązania]}

Możesz wypróbować poniższy kod

.frame{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
} 

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Możesz to zrobić:

Demo

Http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* here.. */
    left: 50%;           /* here... */
    position: absolute; /* and here */
}    

Javascript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Kluczową właściwością jest display: table-cell; for .rama. Div.ramka jest wyświetlana w tej linii, więc musisz ją owinąć w element blokowy.

To działa w FF, Opera, Chrome, Safari i IE8+.

UPDATE

Dla IE7 musimy dodać wyrażenie css:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Nie jestem pewien co do IE, ale pod Firefoksem i Chrome, jeśli masz img w div kontenerze, następujący css powinien działać. Przynajmniej dla mnie działa dobrze:

div.img-container {
    display:table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Wypróbuj To rozwiązanie z czystym css http://jsfiddle.net/sandeep/4RPFa/72 / Może to być główny problem z Twoim html. Nie używaj cytatu, gdy zdefiniujesz class & image height w Twoim html.

CSS:

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    position:relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom:20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;
    margin:0 auto;
    max-height:25px;
}

EDIT:

Kiedy pracuję z tagiem img to zostawiam 3px to 2px spację z top. Teraz zmniejszam line-height i to jest praca. css:

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height:0;    
        max-height:25px;
        max-width:160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* webkit browsers */
    }

Właściwość line-height jest render różnie w różnych przeglądarkach. Więc; musimy zdefiniować różne line-height przeglądarki właściwości

Sprawdź ten przykład http://jsfiddle.net/sandeep/4be8t/11/

Zobacz ten przykład o line-height różnicach w różnych przeglądarkach różnicach wysokości wejściowych w Firefoksie i Chrome

Moje rozwiązanie: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Możesz również użyć Flexbox, aby uzyskać poprawny wynik:

.parent {
  align-items: center; /* for vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Easy way which work for me:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Działa bardzo dobrze w Google Chrome. Wypróbuj ten na innej przeglądarce.

To działa w nowoczesnych przeglądarkach (2016 w momencie edycji), jak pokazano w tym demo na codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Jest bardzo ważne, aby nadać obrazom klasę lub użyć dziedziczenia, aby skierować obrazy, które potrzebujesz wyśrodkować. W tym przykładzie użyliśmy .frame img {}, Aby tylko obrazy zawinięte przez div z klasą .frame były kierowane.

ROZWIĄZANIE ZA POMOCĄ KOMÓRKI TABLE & TABLE

Czasami powinno być rozwiązane przez wyświetlenie jako table / table-cell. Na przykład szybki ekran tytułowy. Jest to również zalecany sposób przez W3. Polecam sprawdzić ten link o nazwie Centrowanie rzeczy od W3C.org

Użyte tu wskazówki to:

• absolutny kontener pozycjonujący wyświetlany jako tabela
• wyrównane pionowo do środka zawartość wyświetlana jako table-cell

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center"> PEACE IN THE WORLD </h1>
 </div>
</div> 

Osobiście nie zgadzam się z używaniem helperów do tego celu

Jeśli możesz żyć z marginesami wielkości pikseli, po prostu dodaj {[0] } do .frame. Ale pamiętaj, że teraz na .frame 1em = 1px, co oznacza, że musisz ustawić margines w pikselach.

Http://jsfiddle.net/feeela/4RPFa/96/

EDIT: teraz nie jest już wyśrodkowany w Operze ...

Do wyśrodkowania obrazu wewnątrz kontenera (może to być logo) oprócz tekstu takiego jak ten:

Zasadniczo zawijasz obraz

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Miałem ten sam problem. To mi działa:

<style type="text/css">
div.parent {
     position: relative;
}

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<div class="parent">
    <img class="child">
</div>

Za pomocą metody table i table-cell Wykonaj zadanie, szczególnie dlatego, że kierujesz również niektóre stare przeglądarki, tworzę dla Ciebie snippet, który możesz uruchomić i sprawdzić wynik:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Możesz użyć tego:

.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;

}

Najlepszym rozwiązaniem jest to, że

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

Bawiłem się używaniem padding do wyrównania środka. Musisz zdefiniować górny poziom zewnętrznego rozmiaru kontenera, ale wewnętrzny powinien zmienić rozmiar i możesz ustawić wypełnienie na różne wartości procentowe.

Jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Stary link JSFiddle, który tu zamieściłem, już nie działał, to prawdopodobnie powód odrzucenia. Tylko ze względu na to, że jest to poprawna odpowiedź, nadal chcę opublikować rozwiązanie jQuery ponownie. Działa to dla każdego elementu, który ma zastosowaną klasę v_align. Będzie on wyśrodkowany pionowo w rodzicu, a po zmianie rozmiaru okna zostanie przeliczony.

Link do JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

A może ten?

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

I możesz zmieniać font-size

Chcesz wyrównać obraz, który ma po tekście / tytule i oba są wewnątrz div?

Zobacz na JSfiddle lub uruchom fragment kodu.

Po prostu upewnij się, że masz ID lub klasę we wszystkich swoich elementach(div, img, title itp.).

Dla mnie To rozwiązanie działa na wszystkich przeglądarkach (dla urządzeń mobilnych należy dostosować kod za pomocą: @ media).

h2.h2red {
color: red; 
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;  
display: block;  
float: left;/*If you want to allign the text with an image on the same row*/  
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}

<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>