如何在不知道 Div 塊寬度的情況下將其居中？

在沒有寬度約束的情況下將div 區塊居中

在不知道其寬度的情況下將div 區塊居中可能是一個挑戰。本文透過提供兩種有效的解決方案來解決此問題：

解決方案1：Inline-block 和Text-align

此解決方案涉及將專案設定為居中顯示: inline-block 及其父容器為text-align: center。這種方法依賴瀏覽器處理內聯塊元素的方式。

CSS:

.child {
  display: inline-block;
}

.parent {
  text-align: center;
}

解 2：相對定位

此解決方案使用相對定位來使內容居中。它涉及將居中的內容包裝在兩個 div 中：一個外部 div 和一個內部 div。

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

.clear {
  clear: both;
}

外部 div 是向右浮動，其右邊緣距其父級邊緣 50%。內部 div 也向右浮動，但其右邊緣距離外部 div 右邊緣的位置為 -50%，有效地將內部 div 及其內容置於父 div 內的中心。

結論

這兩種解決方案都提供了在不提前知道其寬度的情況下將 div 區塊居中的有效方法。選擇使用哪種解決方案取決於專案的特定要求和限制。