Center div in another div

<style> .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align:center; /* Align center inline elements */ font: 0/0 a; } .img-container:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } .img-container img { vertical-align: middle; display: inline-block; } </style> <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <img src="http://placehold.it/150x150" alt="" /> </div> </div>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.