Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vertically Center the IMG in a DIV with CSS</title> <style> .outer-wrapper{ display: inline-block; margin: 20px; } .frame{ width: 250px; height: 200px; border: 1px solid black; vertical-align: middle; text-align: center; display: table-cell; } img{ max-width: 100%; max-height: 100%; display: block; margin: 0 auto; } </style> </head> <body> <!-- Alignment of undersized image --> <div class="outer-wrapper"> <div class="frame"> <img src="/examples/images/club.jpg" alt="Club Card"> </div> </div> <br> <!-- Alignment of vertically oversized image --> <div class="outer-wrapper"> <div class="frame"> <img src="/examples/images/kites.jpg" alt="Flying Kites"> </div> </div> <br> <!-- Alignment of horizontally oversized image --> <div class="outer-wrapper"> <div class="frame"> <img src="/examples/images/sky.jpg" alt="Cloudy Sky"> </div> </div> </body> </html>
