How to center a image vertical in css

[Rhoda]

Hi guys how do i center this image vertical inside the header?
The height of the header is different when you are login or logout!

Code: [Select]

<div class="header">
  <nav class="header-content columns" data-topbar role="navigation">
    <div class="logo-area">
      <?php echo logo_header(); ?>
    </div>
    <section class="header-content-section">

    </section>
  </nav>
</div>

How to set up the css that the image will stay vertical centered?

.header-content .logo-area {

}
.header-content .logo-area img {

}

Thanks

[_carlison]

try this code :

.header-content .logo-area img {
 display: block;
    margin: 0 auto;
}

[Liath]

try this code :

.header-content .logo-area img {
 display: block;
    margin: 0 auto;
}

nonsens, this is to center it horizontally... you could take a look on this example

[frosticek]

Use position absolute on image and set top, left, right and bottom to auto, margin as well.

[Liath]

Use position absolute on image and set top, left, right and bottom to auto, margin as well.

then you need to set position relative to the parent also

[marius-ciclistu]

The easiest way would be to use margin top or bottom and to manually enter a value so it's centered in the header. (imho).

[Liath]

whats the problem with my suggested solution? it's so easy
https://jsfiddle.net/qxr5a0a2/

[marius-ciclistu]

I just saw it. Seems ok.(I did not look at it before, I was just expresing my oppinion).