How to center image in div (height - % of screen)

Question

My website has a header and it takes 20% of screen. I want an image (which is 90% of header height) right in the center of the header. I had no problems to center the image horizontally, but I can't center it vertically. Here's the code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Website</title>
    <link rel="stylesheet" href="stylingpercent.css" />
</head>

<body>

    <header>
        <div class="logoheader" >
            <img class="mainlogo" src="logo.png" alt="logo">
        </div>

    </header>



</body>

</html>

body {
    margin:0px;
}


.logoheader{
    height: 20vh;
    background:rgb(1,1,1);
    margin:0px;
    text-align: center;
}


.mainlogo { 
    max-height:90%;
}

for vertical alignment you can refer [my answer](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474). Here is a demo: http://jsbin.com/munak/1/edit — Hashem Qolami, Mar 13 '14 at 19:18

score 0 · Answer 1 · answered Mar 13 '14 at 18:36

0

Add this:

line-height: 20vh;

to .logoheader. DEMONstration.

answered Mar 13 '14 at 18:36

Mohammad Areeb Siddiqui

9,795
14
71
113

How to center image in div (height - % of screen)

1 Answers1