vertical alignment - Vertically centering header and paragraph in html -

i still new @ this, i'm starting learn. seems there many ways vertically center content, can't figure out how apply code have , both header , paragraph. h2 header , .why_text vertically centered. what's best way this? here have far. (note have 5 sections odd/even)

<style><!-- p.large {     line-height:30px;     font-size:16px; } .why_section   {margin-bottom: 80px;}        .why_section:nth-child(odd) h2 {display: block; width: 64%; margin-left: 5%; float: right;}       .why_section:nth-child(odd) .why_image { width: 30%; margin-right:1%; float: left;}       .why_section:nth-child(odd) .why_text {width: 64%; margin-left: 1%; float: right;}        .why_section:nth-child(even) h2 {display: block; width: 64%; margin-left: 0%; float: left;}       .why_section:nth-child(even) .why_image { width: 30%; margin-left:1%; float: right;}       .why_section:nth-child(even) .why_text {width: 64%; margin-right: 5%; float: left;}         .why_section .why_image img{ width: 100%;}         .clear {clear: both;}  @media screen , (max-device-width: 600px)  {             .why_section:nth-child(odd) h2 {display: block; width: 100%; margin-left: 0%; float: none;}             .why_section:nth-child(odd) .why_image { width: 100%; margin-left: 0%; float: none;}             .why_section:nth-child(odd) .why_text {width: 100%; margin-right: 0%; float: none;}              .why_section:nth-child(even) h2 {display: block; width: 100%; margin-left: 0%; float: none;}             .why_section:nth-child(even) .why_image { width: 100%; margin-left: 0%; float: none;}             .why_section:nth-child(even) .why_text {width: 100%; margin-right: 0%; float: none;}         } --></style> <div id="why_wrapper"> <div class="why_section"> <h2>...</h2> <div class="why_image"><img src="..." /></div> <div class="why_text"> <p class="large">...</p> </div> <div class="clear"></div> </div>