Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vertically Align an Image inside a DIV using CSS</title> <style> .frame{ width: 250px; height: 200px; margin: 20px; border: 1px solid black; position: relative; } img{ max-height: 100%; max-width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style> </head> <body> <!-- Alignment of undersized image --> <div class="frame"> <img src="/examples/images/club.jpg" alt="Club Card"> </div> <br> <!-- Alignment of vertically oversized image --> <div class="frame"> <img src="/examples/images/kites.jpg" alt="Flying Kites"> </div> <br> <!-- Alignment of horizontally oversized image --> <div class="frame"> <img src="/examples/images/sky.jpg" alt="Cloudy Sky"> </div> </body> </html>
