Afbeelding verticaal centreren

[Verwijderd lid 162876]

Hi,

Ik probeer een gallery te maken in html5 bestaande uit
div.image-container met daarin een div.image en een div.caption
De div.caption komt alleen zichtbaar met :hover translate.

De afbeelding in de .image div wil ik horizontaal en verticaal centreren.
De html code ziet er als volgt uit:

      <div class="image-container">
          <div class="image">
              <a href="black/art-pattern-background-tile.php"><img src="black/images/black-loading-circles-middle.gif" /></a>
          </div>
          <div class="caption">
              <b>VIEW</b>
          </div>
      </div>

De CSS code ziet er zo uit:

.image-container {
  display: inline-block;
  position: relative;
  width: 245px;
  height: 245px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}
.image {
  width: 245px;
  height: 245px;
  z-index: 1;
  transition: all .5s;
}
.image img {
  max-width: 100%;
}
.caption {
  text-align: center;
  color: #DDD3C9; /* broken white */
  width: 245px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(28, 28, 28, 0.9);
  z-index: 2;
  font-weight: bold;
  font-family: 'Bitter', serif;
  transition: all .5s;
}
.caption {
  transform: translateY(-245px) translateY(-100%);
}
.image-container:hover .caption {
  transform: translateY(-245px);
}
.image-container:hover .image {
  opacity: .5;
}

Ik heb al geprobeerd om de afbeelding met vertical-align: middle; te centreren of met line-height 245px; en ik heb van alles geprobeerd met margin en display maar ik krijg het niet voor elkaar.
Is het wel mogelijk om met css3 een afbeelding verticaal te centreren? En zo ja weet iemand hoe?

Alvast bedankt voor eventuele reacties.

 

[Erick]

Even zonder iets uitgeprobeerd te hebben, maar misschien kun je de container
-een line-height: 245px
en
- vertical-align: middle
meegeven?

 

[Verwijderd lid 162876]

Dat had ik ook al geprobeerd Erick maar dat werkte ook niet.
Het is inmiddels opgelost.

Ik heb div.image een line-height van 245px meegegeven en de afbeelding vertical-align: middle;

In elk geval bedankt voor je reactie.

 

[Erick]

Super dat het is opgelost!