HTML

<div class="centering-content-demo-3"> <div class="demo-3-left"> <img src="/images/2015/05/kingston.jpg" /> </div> <div class="demo-3-right"> Vertically and horizontally centered multi-line text in a dynamically sized responsive container. </div> </div>

CSS

.centering-content-demo-3 { padding: 10px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .demo-3-left, .demo-3-right { text-align: center; padding: 10px; width: 50%; } .demo-3-left img { width: 100%; }

JavaScript