為什么在具有絕對/固定位置的元素上設置 50vw 或 50% 沒有將其准確設置在中間？

Question

事實上，我有時會發現設置50vw只會使元素達到預期距離的一半左右。

為什么會發生這種情況？ 我在這里錯過了什么？

Answer 1

您還需要減去項目寬度的一半。 例如，您可以使用邊距來做到這一點。 還有其他選項，例如 calc。

用一個例子看這個小提琴： https : //jsfiddle.net/cgsymvyg/1/

 #box1 { border: 1px solid red; background: green; color: white; width: 100px; height: 100px; position: absolute; left: 50vw; } #box2 { top: 200px; border: 1px solid green; background: red; color: white; width: 100px; height: 100px; position: absolute; left: 50vw; margin-left: -50px; } #box3 { top: 400px; border: 1px solid yellow; background: blue; color: white; width: 100px; height: 100px; position: absolute; left: calc(50vw - 50px); }

 <div id="box1"> Box 1 </div> <div id="box2"> Box 2 </div> <div id="box3"> Box 3 </div>