cela pourrait être utile:

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

référence: http://www.student.oulu.fi / ~laurirai / www/css / middle/

la solution de matejkramny est un bon début, mais les images surdimensionnées ont un mauvais ratio.

Voici ma fourchette:

Démo: https://jsbin.com/lidebapomi/edit?html,css, sortie

<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 de la ligne de solution:

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

cela s'applique à tout.

à Partir de ici .

a PURE CSS Solution:

http://jsfiddle.net/3MVPM /

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

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

de cette façon vous pouvez centrer une image verticalement ( demo ):

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

pour ceux qui ont atterri sur ce poste et sont intéressés par une solution plus moderne, et qui n'ont pas besoin de prendre en charge les navigateurs hérités, vous pouvez le faire:

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

voici un stylo: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

vous pouvez essayer de définir le CSS de PI à display: table-cell; vertical-align: middle;

il y a une super easy solution avec flexbox!

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

image d'arrière-plan solution J'ai supprimé l'élément image et l'ai placé comme arrière-plan du div avec une classe de .frame

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

cela fonctionne au moins bien sur IE8, FF6 et Chrome13

j'ai vérifié, cette solution ne fonctionnera pas à rétrécir les images plus grand que 25px hauteur. Il y a une propriété appelée background-size qui ne définit la taille de l'élément, mais C'est CSS3 qui entrerait en conflit avec l'exigence IE7.

je vous conseillerais soit de refaire les priorités et la conception de votre navigateur pour les meilleurs navigateurs disponibles, ou obtenir un certain code serverside pour redimensionner les images si vous voulez utiliser cette solution

vous pouvez essayer ci-dessous le code

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

Vous pourriez faire ceci:

démo

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

la propriété clé est display: table-cell; for .cadre. Div.le cadre est affiché comme inline avec ceci, donc vous devez l'envelopper dans un élément de bloc.

cela fonctionne en FF, Opéra, Chrome, Safari et IE8+.

UPDATE

pour IE7 nous devons ajouter une expression css:

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

pas sûr de IE, mais sous Firefox et Chrome, si vous avez un img dans un conteneur div , le css suivant devrait fonctionner. Au moins pour moi fonctionne bien:

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

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

essayer cette solution avec CSS pur http://jsfiddle.net/sandeep/4RPFa/72 / Peut - être le problème principal avec votre html. Vous n'utilisez pas la citation lorsque vous définissez c lass et image height dans votre 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 :

quand je travaille avec l'étiquette img c'est le congé 3px to 2px espace de top . Maintenant, je baisse line-height et c'est le travail. 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 */
    }

la propriété line-height est render différemment selon les navigateurs. Si; nous devons définir différent line-height biens navigateurs

cochez cet exemple http://jsfiddle.net/sandeep/4be8t/11/

vérifier cet exemple à propos de line-height different in different browsers différences de hauteur d'entrée dans Firefox et Chrome

ma solution: 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;
}

vous pouvez également utiliser Flexbox pour obtenir le résultat correct:

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

la voie facile qui travaille pour moi:

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

fonctionne très bien pour Google Chrome. Essayez celui-ci sur un autre navigateur.

cela fonctionne pour les navigateurs modernes (2016 au moment de l'édition) comme indiqué dans ce démo sur codepen

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

il est très important que vous donniez une classe aux images ou que vous utilisiez l'héritage pour cibler les images dont vous avez besoin centrées. Dans cet exemple, nous avons utilisé .frame img {} de sorte que seules les images enveloppées par un div avec une classe de .frame seraient ciblées.

SOLUTION USING TABLE & TABLE CELL

parfois, il doit être résolu en affichant comme tableau / table-cellule. Par exemple un écran titre rapide. C'est un moyen recommandé par W3 aussi. Je vous recommande de vérifier ce lien appelé centrage des choses de W3C.org

les conseils utilisés ici sont:

• positionnement Absolu conteneur affiche comme le tableau
• vertical aligné sur centre du contenu affiché sous forme de 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> 

personnellement, je ne suis pas d'accord sur l'utilisation des helpers à cette fin

si vous pouvez vivre avec des marges de taille pixel, il suffit d'ajouter font-size: 1px; au .frame . Mais rappelez-vous, que maintenant sur le .frame 1em = 1px, ce qui signifie, Vous devez définir la marge en pixels aussi.

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

EDIT: maintenant c'est pas plus centrée à l'Opéra...

pour centrer une image à l'intérieur d'un conteneur (ce pourrait être un logo) en plus d'un texte comme celui-ci:

fondamentalement, vous envelopper l'image

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

j'ai eu le même problème. Cela me convient:

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

en utilisant table et table-cell méthode faire le travail, surtout parce que vous ciblant certains vieux navigateurs ainsi, je crée un extrait pour vous que vous pouvez l'exécuter et de vérifier le résultat:

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

vous pouvez utiliser ceci:

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

}

la meilleure solution est que

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

j'ai joué avec l'utilisation du rembourrage pour l'alignement du centre. Vous aurez besoin de définir le niveau supérieur de la taille du conteneur extérieur, mais le conteneur intérieur devrait redimensionner, et vous pouvez définir le padding à différentes valeurs de pourcentage.

jsfiddle

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

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

img {
  width: 100%;
}

l'ancien lien JSFiddle que j'ai posté ici ne fonctionnait plus, c'est probablement la raison de la baisse. Juste pour le bien de ceci étant une réponse valable je veux encore poster la solution de jQuery à nouveau. Cela s'applique à tous les éléments auxquels s'applique la classe v_align . Il sera vertical centré dans le parent et sur le redimensionnement de la fenêtre, il sera recalculé.

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

et celui-ci?

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

et vous pouvez varier font-size

Voulez aligner une image qui après un texte / titre et les deux sont à l'intérieur d'un div?

, Voir sur JSfiddle ou Exécuter du Code Extrait.

assurez-vous D'avoir un ID ou une classe à tous vos éléments(div, img, titre, etc).

pour moi fonctionne cette solution sur tous les navigateurs (pour les appareils mobiles vous devez adapter votre code avec: @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>