保持元素在页面的顶部和底部之间对齐

Question

我有一个显示图像的网页和另一部分标题为“关于我”的文章，下面有一些段落。目前，图像在左侧，所有文本在右侧（我想要这个）。我无法弄清楚的是，如何将图像和文本部分（h3和段落）对齐距屏幕顶部和屏幕底部相等的距离。我希望图像的顶部与屏幕中间的h3顶部对齐，段落部分位于相应侧的h3下方。

HTML：

<div id="wrapper">
    <section id="homepage_section">
        <img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
            <h3>About Me</h3>
            <p>
                Some text here.
            </p>
            <p>
                Further text.
            </p>
    </section>
    <footer>
        <p>
            &copy; 2016 Name
        </p>
    </footer>
</div>

CSS：

.profile-photo {
    display: block;
    max-width: 350px;
    border-radius: 100%; /* adds rounded corners to an element */
}

#wrapper #homepage_section .profile-photo {
    margin-top: 50px;
}

我一般都想避免像我这里做的那样，我只是简单地将元素向下推到页面边缘。我宁愿有一些东西允许元素自动位于页面的顶部和底部之间。我也有点困惑为什么margin-top样式元素在第二个CSS部分工作，但是当我把它放在.profile-photo部分（这对我来说似乎是同样的东西）时不起作用，但是我想这是一个不同的问题。