如何將 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>

附加說明：

某些情況下，您可能需要調整邊距或其他樣式值以確保正確居中。
確保容器元素足夠大，可以容納您的內容。
這些方法適用于所有現代瀏覽器。