如何在窗口大小调整期间使三角形元素完美水平居中？

在调整窗口大小期间保持元素水平居中

问题：
通过 CSS 将元素水平居中调整窗口大小时可能会很棘手，特别是对于带有三角形的元素

解决问题：
为了确保元素保持水平居中，无论窗口大小如何，必须使用正确的 CSS 属性并了解元素定位的工作原理。虽然设置 left: 50% 可能看起来很直观，但它实际上是根据元素的左边缘而不是中心定位元素。

解决方案：变换和平移
实现真正的水平居中，通常使用transform:translate()属性。此属性指示元素将自身向后移动指定的宽度百分比，从而有效地将其居中于所需的轴上。

将转换应用于现有代码
在提供的代码中，三角形元素最初定位为 left: 48%，这将其放置在靠近中心的位置，但不正确。为了调整这个，我们可以使用transform:translate(-50%, 0)规则将元素向后移动其宽度的50%，确保它完全居中。

链接变换
但是，提供的代码还包含一个transform:rotate(45deg)属性，该属性在transform:translate(-50%, 0)之前应用。这会导致由于CSS级联而忽略transform：translate()规则。

为了解决这个问题，我们可以使用transform属性链接函数的能力来组合这两个转换。三角形元素的最终CSS规则将是：

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

通过按此顺序链接变换函数（首先是translate()，然后是rotate()），我们确保元素首先向后移动其宽度的 50%，然后旋转 45 度。这可以确保即使调整窗口大小时三角形也保持水平居中。

以上是如何在窗口大小调整期间使三角形元素完美水平居中？的详细内容。更多信息请关注PHP中文网其他相关文章！