如何仅使用 CSS 将 Div 元素置于屏幕中央？

将

居中使用 CSS 在屏幕上显示元素

创建网页布局时，通常需要将元素放置在屏幕的中心。这可以使用 CSS 来实现，无需内联样式或复杂的 JavaScript 解决方案。

固定元素的宽度和高度

一种简单的方法是定义一个固定的

的宽度和高度元素：

#divElement {
    width: 100px;
    height: 100px;
}

定位元素

为了将元素定位在精确的中心，我们使用绝对定位：

#divElement {
    position: absolute;
}

计算中心坐标

确定屏幕的中心，我们需要找到它的宽度和高度的中点。这涉及到将它们除以二：

top_margin = screen_height / 2;
left_margin = screen_width / 2;

调整元素的边距

为了调整元素的位置，我们使用负边距。这会将元素从原始位置移动一半的高度和宽度，使其在屏幕上居中：

#divElement {
    margin-top: -top_margin;
    margin-left: -left_margin;
}

完整示例

将它们放在一起，这是完整的 CSS 代码：

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

以上是如何仅使用 CSS 将 Div 元素置于屏幕中央？的详细内容。更多信息请关注PHP中文网其他相关文章！