如何在不设置宽度的情况下将可变宽度的 div 块居中？

在不设置宽度的情况下将可变宽度的 Div 块居中

在不知道其宽度的情况下将 div 块居中可能是一项具有挑战性的任务。此问题通常在处理动态内容时出现，其中块内元素的数量和大小可能会发生变化。

解决方案 1：使用 Inline-Block 和 Text-Align

@bobince 推荐的一种方法涉及使用以下 CSS 样式：

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

在这种情况下，子 div 被分配内联块显示属性，而父 div 具有其文本对齐方式设置为中心。这会导致子 div 浮动在父 div 内，自动调整其宽度以适应其内容。通过将父 div 居中，子 div 可以有效地在其容器内居中。

解决方案 2：具有相对定位的嵌套 Div

另一种解决方案涉及在父级内嵌套 div容器：

<div class="product_container">
  <div class="outer-center">
    <div class="product inner-center">
    </div>
  </div>
  <div class="clear"></div>
</div>

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

在这种方法中，嵌套的 div 使用基于百分比的 right 属性进行浮动和定位。外层div设置为父容器的中点，内层div偏移自身宽度的一半，实现居中。

以上是如何在不设置宽度的情况下将可变宽度的 div 块居中？的详细内容。更多信息请关注PHP中文网其他相关文章！