Tại sao "trái: 50%, chuyển đổi: dịchX (-50%)" nằm ngang giữa phần tử?

Question

Gần đây tôi refactored một số CSS của tôi và đã ngạc nhiên khi thấy một cách dễ dàng hơn để nằm ngang gắn kết yếu tố hoàn toàn vị trí của tôi:

.prompt-panel { 
    left: 50%; 
    transform: translateX(-50%); 
} 

này hoạt động tuyệt vời! Ngay cả khi chiều rộng của phần tử của tôi là tự động. Tuy nhiên, tôi không hiểu những gì đang xảy ra để làm cho điều này thực sự hiệu quả. Giả thiết của tôi là dịchX chỉ là một phương tiện hiện đại, hiệu quả hơn trong việc di chuyển một phần tử xung quanh, nhưng điều đó dường như không đúng.

Hai giá trị này có nên hủy lẫn nhau không? Ngoài ra, tại sao

.prompt-panel { 
    left: -50%; 
    transform: translateX(50%); 
} 

không hiển thị kết quả tương tự như đoạn mã đầu tiên?

Answer 1

Thuộc tính CSS left dựa trên kích thước của phần tử gốc. Thuộc tính transform dựa trên kích thước của phần tử đích.

Tên: transform

Tỷ lệ phần trăm: tham khảo kích thước của hộp bounding [của nguyên tố này mà phong cách được áp dụng]

http://www.w3.org/TR/css3-transforms/#transform-property

'top'

Tỷ lệ phần trăm: tham khảo chiều cao của khối chứa

http://www.w3.org/TR/CSS2/visuren.html#position-props

Nếu phụ huynh là 1000px rộng và đứa trẻ là 100px, Trình duyệt sẽ giải thích các quy tắc trong câu hỏi của bạn như sau:

Ví dụ 1:

.prompt-panel { 
    left: 500px; 
    transform: translateX(-50px); 
} 

Ví dụ 2 :

.prompt-panel { 
    left: -500px; 
    transform: translateX(50px); 
} 

Answer 2

left 50% sẽ di chuyển phần tử chính xác ở chính giữa vùng chứa chính nơi phần tử này thuộc về! NHƯNG translateX(50%) sẽ di chuyển phần tử chính xác đến 50% chiều rộng của nó và NOT ở giữa toàn bộ phần tử Vùng chứa!

Đó là sự khác biệt chính giữa chúng và đó là lý do tại sao ví dụ này có sự khác biệt!

Một ví dụ chung để xóa này ra: (fiddle here):

#pos 
 
{ 
 
    border:1px solid black; 
 
    position:absolute; 
 
    width:200px; 
 
    height:150px; 
 
} 
 
#pos-2 
 
{ 
 
    border:1px solid black; 
 
    position:absolute; 
 
    width:auto; 
 
    height:150px; 
 
} 
 
.prompt-panel { 
 
position:absolute; 
 
} 
 

 
.prompt-panel1 { 
 
    position:absolute; 
 
    left: 50%; 
 
} 
 
.prompt-panel2 { 
 
    position:absolute; 
 
    left: -50%; 
 
} 
 
.prompt-panel3 { 
 
    position:absolute; 
 
    transform: translateX(-50%); 
 
} 
 

 
.prompt-panel4 { 
 
    position:absolute; 
 
    transform: translateX(50%); 
 
} 
 
.prompt-panel5 { 
 
    position:absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.prompt-panel6 { 
 
    left: -50%; 
 
     transform: translateX(50%); 
 
} 
 
#pos-auto 
 
{ 
 
    position:absolute; 
 
}

<div><b> With fixed width 200px</b></div> 
 
<br/> 
 
<div id="pos"> 
 
<div class="prompt-panel">panel</div> 
 
<br/> 
 
<div class="prompt-panel1">panel1</div> 
 
<br/> 
 
<div class="prompt-panel2">panel2</div> 
 
<br/> 
 
<div class="prompt-panel3">panel3</div> 
 
<br/> 
 
<div class="prompt-panel4">panel4</div> 
 
<br/> 
 
<div class="prompt-panel5">panel5</div> 
 
<br/> 
 
<div class="prompt-panel6">panel6</div> 
 
</div> 
 
<br/><br/><br/> <br/><br/><br/><br/><br/><br/> 
 
<div><b> With fixed width auto</b></div> 
 
<br/> 
 
<div id="pos-2"> 
 
<div class="prompt-panel">panel</div> 
 
<br/> 
 
<div class="prompt-panel1">panel1</div> 
 
<br/> 
 
<div class="prompt-panel2">panel2</div> 
 
<br/> 
 
<div class="prompt-panel3">panel3</div> 
 
<br/> 
 
<div class="prompt-panel4">panel4</div> 
 
<br/> 
 
<div class="prompt-panel5">panel5</div> 
 
<br/> 
 
<div class="prompt-panel6">panel6</div> 
 
</div>