Vertically align an image inside a div with responsive height

ref http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height

Yêu cầu:

• Chỉ sử dụng HTML và CSS, không sử dụng Javascript
• Hiển thị 1 hình ảnh duy nhất nằm trong trung tâm của màn hình
• Hình ảnh có nhiều kích cỡ
• Không phải cuộn chuột (ngang/dọc) để xem hết hình ảnh bất kể kích cỡ màn hình

Giải pháp đơn giản nhất là sử dụng flex của CSS 3. Các giải pháp khác đều mang tính work-around và không ổn định

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Các giải pháp khác và hạn chế:

• Sử dụng vertical-align: middle và chưa bao giờ thành công
• Sử dụng thuộc tính background: contain và sử dụng ảnh làm background. Nhược điểm là ảnh có cả 2 chiều nhỏ hơn kích thức màn hình sẽ bị làm to ra cho đến khi 1 trong 2 chiều bằng với kích thước màn hình.