在css中让图片居中，常用的方法之一是借助 text-align 属性。下面以 div 容器内图片水平居中为例，逐步演示实现过程。
1、新建一个名为 test.html 的网页文件，通过具体示例展示如何利用CSS达成图片居中显示的效果。
2、在 test.html 中，使用 <div> 标签构建一个内容区域，并为其设置 class="content"，方便后续通过该类名编写CSS规则，从而实现HTML结构与样式逻辑的解耦，增强代码可读性与后期维护效率。
立即学习“前端免费学习笔记（深入）”；
3、在该 <div> 元素内部插入 <img> 标签，src 属性指向 images/4.jpg，加载本地图片资源。
4、在 test.html 页面中添加 <style> 标签，用于内联书写CSS样式代码，便于快速调试与预览。
5、在 <style> 标签中，为 .content 类定义样式：设定固定宽高（width: 400px; height: 300px;），并设置背景色为灰色（background: #ccc;），以便清晰观察图片定位效果。
6、关键步骤：对 .content 添加 text-align: center; 声明，使其中的行内级元素（如 <img>）在其父容器内水平居中对齐，从而完成图片的居中布局。
7、保存文件后，用任意现代浏览器打开 test.html，即可直观查看图片是否已准确居中呈现。
8、重新创建一个名为 test.html 的空白HTML文件。
