Vertically aligning an image

Question

The good old problem of vertically aligning an img!! I've managed it but by the looks of it, it doesn't work on safari! Has anyone got anyother ways of doing it?

Code:

    <div class="logo">
       <a href="index.html"><img alt="" src="img/logo-white.png"></a>
    </div>


    .logo {
        padding-top:2.5%;
        height: 104px;
    }

    .logo img {
          position: relative;
  top: 50%;
  transform: translateY(-50%);
    }

Thanks

Answer 1

first of all, to use css3 'transform' you need to use the safari & chrome prefix:

-webkit-transform: translateY(-50%);
transform: translateY(-50%);

it depends on the safari version, it will be supported from version 7.1 and up: http://caniuse.com/#search=transform

there is more then two ways to do it but let's take a look on two for now:

1)

.logo {
    height: 104px;
    position: relative;   
}

.logo img 
{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

2)

.logo 
{
    height: 104px;
}

.logo > a 
{
   display: table-cell;
    vertical-align: middle;
    height: inherit;
}

Answer 2

Since the height of the div is fixed, you can cut off the nasty tricks, and simply equal the line-height to the height value.

.logo {
  padding-top:2.5%;
  height: 104px;
  outline: 1px solid red;
  line-height: 104px;
}

<div class="logo">
       <a href="index.html"><img alt="Meazey Web design" src="img/logo-white.png"></a>
</div>