如何使用 CSS 将 `` 元素在屏幕上居中？

如何定位

使用 CSS 将元素置于屏幕中心

将

的位置集中放置无论屏幕分辨率如何，网页上的元素都需要仔细的 CSS 样式设置。目标是确保所有边的间距相等：上、下、左、右。

方法 1：固定尺寸的绝对定位

对于具有预定值的元素宽度和高度，最简单的解决方案是绝对定位：

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

• 此方法将元素的位置设置为屏幕高度和宽度的 50%，将其放置在中心。
• 元素高度和宽度一半的负边距将其位置偏移正确的量，确保所有边的间距相等。

示例：

<div>
<p><strong>方法2: CSS Transform 属性</strong></p>
<p>对于动态调整大小的元素，可以使用 CSS 变换属性：</p>
<pre class="brush:php;toolbar:false">#divElement {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

• 此方法对元素应用平移变换，在水平和垂直方向将其宽度和高度移动一半。
• 元素保持位于屏幕高度的 50%和宽度，但由于变换而正确偏移。

注意：

• 两种方法都确保元素居中，不会随页面内容滚动。
• 建议使用现代浏览器以获得与这些 CSS 的最佳兼容性技术。