title: CSS centering an image in portrait or landscape mode for a 100vh landing page
body: <p>I am trying to create a landing page for my website. The size of the landing is always the height of the device or 100vh with an arrow at the bottom to scroll the user to content below. I want my face to be in the center of that landing div. Positioning it has not been very difficult on desktop because I leave the image relatively small in the center of the screen, but on mobile where either portrait view is very long and skinny or landscape is wide but short I am not sure how to position my image and text so they work consistently across a number of devices.</p>
  
  <p><a href="https://i.stack.imgur.com/IJTc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IJTc5.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="landing"&gt;
      &lt;div class="content"&gt;
          &lt;img src="image.svg"&gt;
          &lt;h1&gt;My Name&lt;/h1&gt;
          &lt;p&gt;Small tagline&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .landing {
      height: 100vh;
      position: relative;
      text-align: center;
  }
  
  .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  img {
      width: 300px;
  }
  
  @media screen and (min-width: 767px) {
      img {
          width: ?
          height: ?
      }
  }
  </code></pre>