如何使用 CSS 将 `` 元素在屏幕上居中？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-12-02 00:46:11

原创

520 人浏览过

How to Center a `` Element on the Screen Using CSS?

如何定位 <div>使用 CSS 将元素置于屏幕中心

将

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

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

#divElement { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }
登录后复制

此方法将元素的位置设置为屏幕高度和宽度的 50%，将其放置在中心。

元素高度和宽度一半的负边距将其位置偏移正确的量，确保所有边的间距相等。

示例：

<div>
登录后复制

方法2: CSS Transform 属性

对于动态调整大小的元素，可以使用 CSS 变换属性：

#divElement { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }
登录后复制

此方法对元素应用平移变换，在水平和垂直方向将其宽度和高度移动一半。

元素保持位于屏幕高度的 50%和宽度，但由于变换而正确偏移。

注意：

两种方法都确保元素居中，不会随页面内容滚动。

建议使用现代浏览器以获得与这些 CSS 的最佳兼容性技术。