如何使固定位置元素水平和垂直居中？

如何將位置：固定元素居中

問題：

居中「位置：固定；」水平和垂直彈出框具有動態寬度和高度，儘管使用邊距：5% auto;

解：

有幾種方法可以實現此目的：

方法1：固定寬度和高度

1. 將top 和left 設定為50%，以使div 的左上角居中。
2. 將 margin-top 和 margin-left 設定為負一半div 的高度和寬度，將中心向中間移動。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

接近2：動態寬度和/或高度

1. 使用transform代替margin，將其設定為div相對寬度和高度的負一半。

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

方法3：固定寬度，但不關心垂直居中

1. 為元素加上left: 0 和right: 0，同時將margin-left 和margin-right 設定為auto。

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

以上是如何使固定位置元素水平和垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！