title: Keeping elements aligned between the top and bottom of the page
body: <p>I have a webpage that is displaying an image and another section of text entitled "About Me" with some paragraphs underneath. Currently, the image is on the left and all the text is on the right (I want this). What I can't figure out, is how to align both the image and the text section (both the h3 and paragraphs) an equal distance from both the top of the screen and bottom of the screen. I would like the top of the image to align with the top of the h3 in the middle of the screen, with the paragraph sections sitting under the h3 on their corresponding side.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;section id="homepage_section"&gt;
          &lt;img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo"&gt;
              &lt;h3&gt;About Me&lt;/h3&gt;
              &lt;p&gt;
                  Some text here.
              &lt;/p&gt;
              &lt;p&gt;
                  Further text.
              &lt;/p&gt;
      &lt;/section&gt;
      &lt;footer&gt;
          &lt;p&gt;
              &amp;copy; 2016 Name
          &lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.profile-photo {
      display: block;
      max-width: 350px;
      border-radius: 100%; /* adds rounded corners to an element */
  }
  
  #wrapper #homepage_section .profile-photo {
      margin-top: 50px;
  }
  </code></pre>
  
  <p>I generally want to avoid doing something like I have here, where I am simply just pushing the element down the page with margin-top. I'd rather have something that allows the element to automatically sit between the top and bottom of page. I'm also a little confused why the margin-top style element works in the second CSS section, but doesn't work when I put it in the .profile-photo section (which seem to be the same thing to me), but I suppose that is a little bit of a different issue.</p>