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

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

问题：

居中“位置：固定；”水平和垂直弹出框具有动态宽度和高度，尽管使用边距：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中文网其他相关文章！