<figure>嵌套<img>的默认布局行为及内部图片居中咨询

理解

默认布局并实现内部居中 #

一、

标签的默认布局行为 #

• 是**块级元素**，默认会占据父容器的全部可用宽度（如示例中绿色框铺满黄色背景的body）。

• 它的内部默认采用流式布局（Flow Layout），行内/替换元素（比如）会按文档流左对齐排列，这就是示例里紫色方块靠左的原因。
• 多数浏览器会给

  设置默认外边距（比如Chrome默认margin: 1em 40px），但这不会改变它占满宽度的核心特性。

二、示例代码 #

<!DOCTYPE html>
<body style="background-color: yellow;">
    <figure style="background-color: green;">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAA
        ADajyQQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad
        5mH3gAAABnSURBVGhD7c8BDQAgDMAw7F0nF4qOkiU10HNnv1RMU0xTTFNMU0xTTFNMU0x
        TTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNMU0xTTFNM
        U0zzaWz2AU8XpdIsmIu3AAAAAElFTkSuQmCC">
    </figure>
</body>
</html>

渲染效果：黄色背景的body中，绿色

框铺满整个宽度，紫色方块在

内靠左对齐。

三、实现居中的方案及原理验证 #

基于

的块级特性，以下方案均可实现内部水平居中，每个方案对应不同布局逻辑：

方案1：利用text-align属性 #

给

添加text-align: center：

<figure style="background-color: green; text-align: center;">
    <img src="...">
</figure>

• 原理：属于行内替换元素，text-align会作用于容器内的行内级元素，使其水平居中，完全适配

  默认的流式布局。

方案2：使用Flexbox布局 #

给

设置Flexbox属性：

<figure style="background-color: green; display: flex; justify-content: center;">
    <img src="...">
</figure>

• 原理：设置display: flex后，

  变为Flex容器，内部成为Flex项目，justify-content: center可让项目在水平主轴上居中，适合复杂布局场景。

方案3：利用margin:auto #

给设置左右margin为auto，并将其转为块级元素：

<figure style="background-color: green;">
    <img style="margin: 0 auto; display: block;" src="...">
</figure>

• 原理：块级元素在父容器中，左右margin设为auto时会自动平分剩余空间实现居中；需将设为display: block，因为默认行内元素无法触发margin:auto的居中逻辑。

方案4：Grid布局 #

给

设置Grid布局：

<figure style="background-color: green; display: grid; place-items: center;">
    <img src="...">
</figure>

• 原理：Grid布局中place-items: center可同时让子元素在水平、垂直方向居中，是最简洁的全能居中方案。

内容的提问来源于stack exchange，提问作者buhtz