Positioning elements inside CSS Grid items

I am trying to position a div in the center of a grid header but many of my attempts have failed.

Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe

Here's the html code:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Ermesinde Clube de Karaté</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style2.css">

  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <div class="brand">
            <img src="/images/eck_logo.png">
            <div class="page-headers">
              <h1>ECK</h1>
              <h3>ERMESINDE CLUBE KARATE</h3>
          </div>
        </div>
      </div>
      <div class="section1">Section1</div>
      <div class="section2">Section2</div>
      <div class="footer">Footer</div>
    </div>

  </body>
</html>

And here is the css:

.wrapper{
    display:grid;
    width:100%;
    background-color:#e3e3e3;
    grid-template-rows: 
    [grid-start hd-start] 100vh 
    [hd-end sc1-start] 100vh 
    [sc1-end sc2-start] 100vh 
    [sc2-end ft-start] 125px 
    [ft-end grid-end];
    grid-template-columns: 100%;
}

div div:hover{
    border:1px solid black;
}

/*
HEADER 
*/
.header{
    grid-row:hd;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/black_belt_stock_photo.jpg);
}

.brand{
    grid-row: brand;
    display:flex;
    justify-content:flex-end;
}

.brand img{
    border: 2px rgb(109, 12, 12) solid;
    border-radius: 50%;
}


.brand h1{
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

.brand h3{
    color:white;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}



.section1{
    grid-row:sc1;
}

.section2{
    grid-row:sc2;
}

.footer{
    grid-row:ft;
}

This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.

I have tried to move around in the css with somethings like: - position:absolute; - vertically-align:center; - justify-content:right; align-content:center;

But none of these worked for me, so please could someone help me? Thank you.

Solution

This might work for you:

.brand{
    grid-row: brand;
    display:flex;
    justify-content:flex-end;
    position: absolute;
    right: 2rem;
    top: 50%;
    margin-top: -160px; /* 1/2 image height */
}