火狐position定位时用到margin-top：50%出错

原创于 2017-01-20 17:56:12 发布 · 517 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在Firefox浏览器中使用fixed布局实现元素居中的问题，特别是margin-top百分比计算方式的不同导致的问题，并提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做弹层时发现fixed在火狐上不能正确居中，后发现不是positon的问题而是，margin-top的%算发不一样。并且

transform-style: preserve-3d;使position:fixed属性失效（3d变形后就会出现fixed的高度出现问题）

DEMO

<div style="position:relative;margin: 0 auto;width: 500px;position:relative;background: red;height: 2000px;">
    <div style="position: fixed;height: 100%;width:100%;background: blue;">
            <div style="position: fixed;background: black;width: 500px;height: 200px;margin-left: 50%;margin-top: 50%;">

            </div>
    </div>
</div>