让盒子里的图片水平居中垂直居中

### CSS 实现图片在容器中水平垂直居中 #### 方法一：使用 Flexbox 布局 通过将 `.container` 设置为弹性容器并应用 `justify-content: center;` 和 `align-items: center;` 属性，可以使子元素（即图片）在父容器中水平和垂直居中[^1]。 ```css .container { display: flex; justify-content: center; /* 主轴方向居中 */ align-items: center; /* 交叉轴方向居中 */ height: 300px; /* 定义容器高度 */ width: 300px; /* 定义容器宽度 */ } .box img { max-width: 100%; /* 防止图片超出容器 */ } ``` --- #### 方法二：使用 CSS Grid 布局 利用 CSS Grid 的强大功能，可以通过定义单列单行网格并将项目对齐到中心来实现居中效果[^4]。 ```css .container { display: grid; place-items: center; /* 同时控制水平和垂直居中 */ height: 300px; /* 定义容器高度 */ width: 300px; /* 定义容器宽度 */ } .box img { max-width: 100%; /* 确保图片适应容器大小 */ } ``` --- #### 方法三：使用绝对定位与 transform 这种方法适用于需要兼容旧版浏览器的情况。通过设置子元素的 `position: absolute;` 并结合 `top`, `left` 和 `transform` 来调整位置[^2]。 ```css .container { position: relative; height: 300px; /* 定义容器高度 */ width: 300px; /* 定义容器宽度 */ } .box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 将自身尺寸的一半作为偏移量 */ max-width: 100%; /* 确保图片不会溢出容器 */ } ``` --- #### 方法四：使用 margin 自动分配法 如果图片的高度和宽度是固定的，则可以通过设置上下左右外边距为自动的方式使其居中[^3]。 ```css .container { text-align: center; /* 水平居中辅助手段 */ height: 300px; /* 定义容器高度 */ line-height: 300px; /* 让文字基线位于中间 */ } .box img { vertical-align: middle;/* 对齐方式 */ max-width: 100%; /* 图片自适应 */ height: auto; /* 维持宽高比例 */ } ``` > **注意**：此方法仅适合固定高度和宽度的场景。 --- #### 总结 以上四种方法均可用于实现图片在容器内的水平垂直居中。推荐优先考虑现代布局方案如 Flexbox 或 Grid，因为它们语法简洁且易于维护；而传统方法（如绝对定位或 margin 自动分配）则更适合特定需求下的兼容性处理。