Vertically align an image inside a div with responsive height

by Giang, last updated 19 Jan 2018

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.