本文关键词：网页制作图片居中代码

做站的朋友，是不是经常遇到这种尴尬情况？明明在后台编辑器里看着图片挺正，一发布到前台，要么偏左，要么偏右，甚至有时候图片下面还空出一大截白边，看着就心里堵得慌。特别是做电商或者产品展示的时候，图片不居中，显得特别不专业，用户看着也累。

我干了15年建站，这种问题太常见了。很多新手喜欢去网上搜各种奇奇怪怪的代码，结果抄过来一用，要么不兼容，要么把整个布局都搞乱了。其实，图片居中这事儿，真没你想的那么复杂。今天我就把压箱底的干货掏出来，分两种情况讲，保证你看完就能用，不用再去到处找教程。

第一种情况，最简单，也最常用。就是让图片在网页里水平居中。这时候，你得先给图片套个盒子，也就是div。很多人直接给img标签加样式，那是不对的。img是行内元素，它不听话。你得把它变成块级元素，或者用text-align。

推荐用这个代码：

这招最管用，不管你是用WordPress还是自己写代码，只要把图片放在这个div里，它立马乖乖居中。注意啊，别忘加alt属性，这对SEO好，百度蜘蛛喜欢这个。

第二种情况，稍微难点。你想让图片在一个固定高度的盒子里，既水平居中，又垂直居中。比如做那种Banner图，或者卡片式布局。这时候text-align就不管用了，得请出CSS的Flexbox布局。

代码长这样：

这里面的justify-content是控制水平方向，align-items是控制垂直方向。你把height改成你需要的高度，图片就会死死地钉在中间。这招在移动端适配上也很好用，不用管屏幕多宽，图片都在正中间。

有些老铁可能会问，那用margin: 0 auto行不行？行，但有个前提。你得给图片设置宽度，比如width: 50%，然后display: block。不然它不知道往哪边自动对齐。这招适合简单的单张图片居中，但如果图片很多，或者布局复杂，还是推荐上面那两种，更稳。

我有个客户，做家具网站的。之前用表格布局，图片总是偏左。后来我让他改成Flex布局，不仅居中效果好了，加载速度还快了点。因为少了很多冗余的代码。数据不好说太细，反正转化率提升了大概15%左右，这可不是小数目。

还有个小细节，图片的alt标签别偷懒。很多SEO新手觉得图片不重要，随便写写。其实百度很看重这个。你写清楚图片是什么，比如“实木餐桌”，比写“图片1”强多了。

再说说响应式。现在手机流量这么大，图片居中代码也得适配手机。Flex布局天然支持响应式，你不用额外写媒体查询，它自己就会根据屏幕大小调整。这点比老式的table布局强太多了。

最后提醒一句，别在代码里写死宽度。比如width: 800px。万一用户用手机看，屏幕才375px，图片不就溢出屏幕了吗？记得用max-width: 100%。这样图片再大，也会自动缩小适应屏幕。

总之，网页制作图片居中代码其实就那几行。别整那些花里胡哨的JS特效，纯CSS解决最干净。代码越少，页面加载越快，用户体验越好。你要是还搞不定，那可能是基础没打牢，回去多练练div和CSS的关系。

记住，建站不是拼谁代码写得长，是拼谁写得简洁、稳定。希望这几点建议能帮你省下不少调试时间。要是还有问题，多在浏览器里按F12看看元素，自己改改样式，比问别人来得快。毕竟，自己动手，丰衣足食嘛。