如何将动态生成的内容置于 Div 块的中心？

将动态大小的 Div 块居中

问题：

将 div 块居中而不使用提前知道其宽度可能是一个挑战。传统方法依赖于固定宽度，这在动态生成内容时不可行。

解决方案 1（推荐）：Inline-Block 方法

利用 inline- block 和 text-align 属性，您可以将元素在父容器中居中。

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

这种方法使子元素居中

解决方案 2：嵌套相对定位

此方法使用具有相对定位的嵌套 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 位于距右侧 50% 的位置，内部 div 位于距右侧 -50% 的位置正确，有效地将内容居中。

以上是如何将动态生成的内容置于 Div 块的中心？的详细内容。更多信息请关注PHP中文网其他相关文章！