CSS flexbox theo chiều dọc/hình ảnh theo chiều ngang trung tâm KHÔNG explicitely xác định chiều cao mẹ

Question

Với chỉ phụ huynh div và đứa trẻ img yếu tố như chứng minh dưới đây làm cách nào để theo chiều dọc và ngang tập trung các yếu tố img khi rõ ràng không định height của phụ huynh div?

<div class="do_not_define_height"> 
<img alt="No, he'll be an engineer." src="theknack.png" /> 
</div> 

Tôi không quá quen thuộc với flexbox vì vậy tôi không sao nếu flexbox tự lấp đầy chiều cao đầy đủ, nhưng không phải bất kỳ thuộc tính không liên quan nào khác.

Answer 1

Nếu không có quy định rõ ràng height tôi xác định tôi cần phải áp dụng giá trị flex cho phụ huynh và grandparent div các yếu tố ...

<div style="display: flex;"> 
<div style="display: flex;"> 
<img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" /> 
</div> 
</div> 

Answer 2

Chỉ cần thêm các quy tắc sau đây để các yếu tố phụ huynh:

display: flex; 
justify-content: center; /* align horizontal */ 
align-items: center; /* align vertical */ 

Dưới đây là một sample demo (Thay đổi kích thước cửa sổ để xem align image)

Browser support cho Flexbox hiện nay là khá tốt.

Đối với khả năng tương thích qua trình duyệt cho display: flex và align-items, bạn có thể thêm cú pháp flexbox cũ cũng như:

display: -webkit-box; 
display: -webkit-flex; 
display: -moz-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-flex-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 
align-items: center;