Tại sao thuộc tính tự động cho lề không hoạt động theo chiều dọc trong khi nó hoạt động theo chiều ngang?

Question

Tôi đã thấy rằng trong khi phát triển trang web, việc định tâm theo chiều dọc một vùng chứa (chiều cao cố định) bên trong một vùng chứa chiều cao ngẫu nhiên luôn là một cơn ác mộng đối với nhà phát triển web (ít nhất là tôi). chiều rộng cố định) bên trong một thùng chứa có chiều rộng ngẫu nhiên, margin:0px auto; có xu hướng phục vụ một cách dễ dàng trong mô hình chuẩn.

Khi mọi thứ có thể đơn giản như vậy tại sao CSS không hoạt động với margin:auto 0px; khi nói đến việc định tâm một vùng chứa chiều cao cố định bên trong một vùng chứa chiều cao ngẫu nhiên? Có lý do cụ thể nào để làm như vậy không? Cảm ơn bạn đã thông tin chi tiết trước.

Answer 1

Nó thực sự là một cơn ác mộng hơn bạn nghĩ, chỉ cần không sử dụng lề. vertical-align thực sự là những gì bạn nên dựa vào cho trung tâm chất lỏng dọc chiều cao. Tôi đã ném cùng một bản demo nhanh chóng để chứng minh quan điểm của tôi:

HTML:

<span></span><div id="any-height"></div> 

CSS:

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; } 

Xem: http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

Câu trả lời đúng cho câu hỏi của bạn là margin: auto 0 doesn 't làm việc theo cùng một cách mà margin: 0 auto hoạt động vì width: auto không hoạt động theo cách tương tự height: auto do es.

Lề tự động dọc hoạt động cho các phần tử được định vị hoàn toàn với chiều cao đã biết.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
} 

Answer 3

css ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
} 

html ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

lưu ý ----------- lớp css này hoạt động với hầu hết tất cả các trình duyệt