如何使用动态尺寸将'position:fixed”元素居中？

使用动态尺寸将 Positioned:fixed 元素居中

使用position:fixed 创建应在屏幕上居中的弹出框时，水平和垂直居中可能会带来挑战。这是因为保证金：5% auto；只水平对齐元素。

要实现所需的对齐方式，可以采用以下策略：

方法 1：已知宽度和高度

如果div的宽度和高度已知，则top和left属性可以设置为50%。此外，margin-top 和 margin-left 应设置为 div 各自尺寸的负一半，以使中心向中间移动。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

方法 2：动态宽度和高度

如果div的尺寸是动态的，则可以使用transform属性代替边距。转换设置为 div 相对宽度和高度的负一半。

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方法 3：固定宽度和不确定垂直对齐

如果 div 的宽度是固定的并且垂直对齐并不重要，可以将 left:0 和 right:0 与 margin-left 和 margin-right 一起添加到元素中auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

通过实现这些方法，您可以将具有动态尺寸的position:fixed元素在屏幕上居中，确保无论视口大小如何它都保持固定。

以上是如何使用动态尺寸将'position:fixed”元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！