如何使用動態尺寸將'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中文網其他相關文章！