Wie kann ich ein Bild in einem Div vertikal ausrichten?

Das könnte nützlich sein: 

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

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

matejkramnys Lösung ist ein guter Anfang, aber übergroße Bilder haben ein falsches Verhältnis.
Hier ist meine Gabel:

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

3-Linien-Lösung:

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

Dies gilt für alles.

Von hier .

Eine reine CSS-Lösung:

http://jsfiddle.net/3MVPM/

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

Schlüsselzeug 

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

Für diejenigen, die auf diesem Beitrag gelandet sind und an einer moderneren Lösung interessiert sind und keine älteren Browser unterstützen müssen, können Sie Folgendes tun:

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

Hier ist ein Stift: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Auf diese Weise können Sie ein Bild vertikal zentrieren ( demo ):

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

Sie könnten versuchen, das CSS von PI auf display: table-cell; vertical-align: middle; einzustellen.

Sie können auch Flexbox verwenden, um das korrekte Ergebnis zu erzielen:

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

Es gibt eine super easy Lösung mit flexbox!

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

Sie können den folgenden Code ausprobieren 

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

Hintergrundbildlösung Ich habe das Bildelement alle zusammen entfernt und als Hintergrund des div mit der Klasse .frame festgelegt.

http://jsfiddle.net/URVKa/2/

dies funktioniert zumindest gut mit IE8, FF6 und Chrome13

Ich habe überprüft, dass diese Lösung nicht dazu geeignet ist, Bilder größer als 25px zu verkleinern. Es gibt eine Eigenschaft mit dem Namen background-size, die die Größe des Elements festlegt. CSS3 steht jedoch in Konflikt mit der IE7-Anforderung.

Ich würde Ihnen raten, entweder die Prioritäten Ihres Browsers zu erneuern und für die besten verfügbaren Browser zu entwerfen, oder Sie erhalten einen Servercode, um die Größe der Bilder zu ändern, wenn Sie diese Lösung verwenden möchten

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

Die Schlüsseleigenschaft lautet display: table-cell; für .frame. Div.frame wird hiermit als Inline angezeigt, daher müssen Sie es in ein Blockelement einschließen.

Dies funktioniert in FF, Opera, Chrome, Safari und IE8 +.

AKTUALISIEREN

Für IE7 müssen wir einen CSS-Ausdruck hinzufügen:

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

Sie könnten das tun:

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

Versuchen Sie diese Lösung mit reinem css http://jsfiddle.net/sandeep/4RPFa/72/ Dies könnte das Hauptproblem Ihrer HTML-Datei sein. Sie verwenden kein Zitat, wenn Sie in Ihrer HTML-Datei class & image height definieren. 

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:

Wenn ich mit dem Tag img arbeite, lasse ich 3px to 2px Platz von top. Jetzt verringere ich line-height & es ist Arbeit . 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 */
    }

die line-height-Eigenschaft ist render in verschiedenen Browsern unterschiedlich. So; Wir müssen verschiedene line-height-Eigenschaftsbrowser definieren 

Überprüfen Sie dieses Beispiel http://jsfiddle.net/sandeep/4be8t/11/

Sehen Sie sich dieses Beispiel über line-height an, die in verschiedenen Browsern unterschiedlich sind Unterschiedliche Eingabehöhen in Firefox und Chrome

Nicht sicher in Bezug auf den IE, aber unter Firefox und Chrome. Wenn Sie eine img in einem div-Container haben, sollte die folgende css funktionieren. Zumindest funktioniert das für mich gut:

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

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

Meine Lösung: 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;
}

Einfache Möglichkeit welche Arbeit für mich:

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

Funktioniert sehr gut für Google Chrome. Versuchen Sie es mit einem anderen Browser.

Dies funktioniert für moderne Browser (2016 zum Zeitpunkt der Bearbeitung), wie in dieser Demo über Codepen gezeigt.

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

Es ist sehr wichtig, dass Sie den Bildern entweder eine Klasse zuweisen oder Vererbung verwenden, um die Bilder, die Sie benötigen, zentriert anzuzeigen. In diesem Beispiel haben wir .frame img {} verwendet, damit nur Bilder von einem div mit einer Klasse von .frame umschlossen werden.

LÖSUNG MIT TABLE & TABLE CELL

Manchmal sollte es gelöst werden, indem es als Tabelle/Tabellenzelle angezeigt wird. Zum Beispiel einen schnellen Titelbildschirm. Es ist auch ein empfohlener Weg von W3. Ich empfehle Ihnen, diesen Link mit dem Namen Centering Things von W3C.org zu überprüfen

Die hier verwendeten Tipps sind:

• Absoluter Positionierungscontainer wird als Tabelle angezeigt
• Vertikal ausgerichtet, um den in der Mitte befindlichen Inhalt als Tabellenzelle anzuzeigen

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

Ich persönlich stimme der Verwendung von Helfern für diesen Zweck eigentlich nicht zu

Wenn Sie mit Rändern in Pixelgröße leben können, fügen Sie einfach font-size: 1px; zum .frame hinzu. Denken Sie jedoch daran, dass jetzt auf .frame 1em = 1px, was bedeutet, dass Sie auch den Rand in Pixel einstellen müssen.

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

EDIT: jetzt nicht mehr in Opera zentriert ...

Zum Zentrieren eines Bildes innerhalb eines Containers (es könnte ein Logo sein) neben einem Text wie dem folgenden:

Grundsätzlich wickeln Sie das Bild ein 

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

sie können dies verwenden:

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

}

Ich hatte das gleiche Problem. Das funktioniert für mich:

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

Mit der table- und der table-cell-Methode erledigen Sie die Aufgabe, insbesondere weil Sie auch auf alte Browser abzielen. Ich erstelle für Sie ein Snippet, das Sie ausführen können, und überprüfen das Ergebnis:

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

Stellen Sie sich vor, Sie haben

<div class="wrap">
    <img src="#">
</div>

Und CSS:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Dieser Code funktioniert gut für mich.

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
 .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>

Ich suchte nach einer ähnlichen Antwort und einige der Vorschläge schnappten das Bild nach links oder das vertikale Verhältnis verknackte das Bild, also kam ich zu dieser Lösung ... Sie zentriert den Inhalt vertikal und horizontal.

 .div{
    position: relative;
    overflow: hidden;
 }
 .bantop img {
    position: absolute;
    margin: auto;
    width: 103%;
    height: auto;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
  }

Ich verwende es für mehrere Projekte und es funktioniert wie ein Sharm

wie wäre es mit diesem?

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

und du kannst font-size variieren

Die beste Lösung ist das

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

Ich habe mit Padding für die Ausrichtung der Mitte herumgespielt. Sie müssen die Größe der äußeren Container der obersten Ebene definieren, die Größe des inneren Containers sollte jedoch geändert werden, und Sie können den Abstand mit unterschiedlichen Prozentwerten einstellen.

jsfiddle

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

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

img {
  width: 100%;
}

Der alte JSFiddle-Link, den ich hier gepostet habe, funktionierte nicht mehr, das ist wahrscheinlich der Grund für das Downvote. Nur weil dies eine gültige Antwort ist, möchte ich noch einmal die jQuery-Lösung posten. Dies funktioniert für jedes Element, auf das die v_align-Klasse angewendet wurde. Es wird vertikal zentriert im übergeordneten Element und beim Ändern der Größe des Fensters wird es neu berechnet.

Link zum 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");
  });
}

Möchten Sie ein Bild ausrichten, das hinter einem Text/Titel steht und sich beide innerhalb eines Divs befinden?

Siehe unter JSfiddle oder Code-Snippet ausführen.

Stellen Sie sicher, dass Sie bei allen Elementen (div, img, title usw.) eine ID oder eine Klasse haben.

Für mich funktioniert diese Lösung auf allen Browsern (für mobile Geräte müssen Sie Ihren Code mit: @media anpassen).

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>