如何将 DIV 盒子居中在屏幕中心

方法 1：使用 CSS 属性

text-align: center; 将容器元素居中。

margin: auto; 在容器元素上设置自动边距，它将元素居中在容器内。

HTML 代码：

<code class="html"><div style="text-align: center; margin: auto;">
  您的内容在此
</div></code>

方法 2：使用 flexbox

display: flex; 将容器元素转换为 flexbox。

justify-content: center; 将元素在主轴（水平方向）上居中。

align-items: center; 将元素在交叉轴（垂直方向）上居中。

HTML 代码：

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  您的内容在此
</div></code>

方法 3：使用绝对定位

position: absolute; 将元素从正常文档流中移除。

left: 50%; 将元素从左边移动其宽度的一半。

transform: translate(-50%, -50%); 将元素从中心点向左和向上移动其宽度和高度的一半。

HTML 代码：

<code class="html"><div style="position: absolute; left: 50%; transform: translate(-50%, -50%);">
  您的内容在此
</div></code>

附加说明：

某些情况下，您可能需要调整边距或其他样式值以确保正确居中。
确保容器元素足够大，可以容纳您的内容。
这些方法适用于所有现代浏览器。