说到网页图片居中，很多小伙伴第一反应就是“到底咋弄？”别急，咱们一步一步来。先说网页居中这事儿，最经典的做法就是给结构容器设置个固定宽度，然后用margin: auto让它跑到中间，效果妥妥的。
比如用Dreamweaver（咚咚，这个工具很赞，适合新手哟），打开网页，切换到代码视图，在<body></body>标签里边操作，就能调整网页居中。图形界面操作也超简单，点开图片，看看属性框右下角那个“对齐”选项，选“居中”或者“绝对居中”，立马搞定。嘿，就是这么炫酷。
另外，CSS里常见写法是这样：
body div {
width: 800px;
margin: 0 auto;
}
这段代码保证了页面主体div居中显示。你看，是不是棒？总之，网页居中还是很容易达到的。
好了，话说回来，咱们重点聊聊图片居中！这里为你大致整理了几大实用妙招：
用text-align让图片水平居中
把图片放进一个div，然后给这个div加个text-align: center;。哎，没错，就是这么简单。想垂直居中？来点crucial：
css
div {
width: 300px;
height: 150px;
background-color: #CCC;
border: 1px solid #000;
text-align: center; /* 水平居中 */
padding-top: 50px; /* 垂直居中技巧 */
}
这样，图片就乖乖地呆在div正中间了。
利用display为table和table-cell的神奇组合
听起来有点绕，但效果一级棒。常规做法是把外层容器设成display: table;，图片外再套个span标签，设置为display: table-cell; vertical-align: middle;，让它像表格单元格一样乖乖居中。提醒一下，IE6、IE7可得用定位技术凑合下，不过现在没啥人用啦。
背景图居中靠background-position
你要是用背景图，画风又不同啦，得用background属性搞：
css
body {
background-image: url("xxx.jpg");
background-position: center center; /* 水平垂直居中 */
background-repeat: no-repeat;
background-size: cover; /* 你也可以试试contain，看效果 */
}
这样无论浏览器宽高怎么变，背景图都给你呆中间，不飘不跑，稳稳的。
使用HTML align属性快速居中
尽管现在不建议搞这个老旧方法，但有时候图快，直接用<img align="center" />也OK，前提别太较真现代标准。
用HBuilder或其他编辑器快速演示
新手推荐：用HBuilder快速创建html文件，写点简单代码：
```html
```
懂了吗？这样整，好玩又管用。
网页居中显示一定要固定宽度吗?
嘿，绝大多数情况下，设置固定宽度能帮你轻松搞定居中，像margin: auto就靠它撑场面。如果宽度不固定，浏览器不知道怎么判定边界，居中就成问题了。不过，有些响应式布局用百分比配合flexbox啥的，也能智能居中，算是黑科技。
Dreamweaver中图片居中难不难设置?
说真的，DW真的是“懒人神器”！你打开图片，直接点属性框，选“对齐”为“居中”，整完保存刷新，嘿！图片就在网页中央闪耀登场啦，简单得让人哭笑不得，谁用谁知道。
CSS里图片要垂直居中，padding行不行?
没错没错，padding是个小能手，用它调点上边距，图片往下挪挪，就能近似垂直居中。不过别忘了，灵活机动地结合display和vertical-align，会让效果更完美，特别是弹性盒子（flexbox）出场后，垂直居中乐趣多了。
背景图想在所有浏览器都居中，怎么保证万无一失?
哈，这问题有意思！背景图居中首选background-position: center center;，加上no-repeat防止重复，再配background-size: cover;，保证满屏好看。但小心老浏览器坑害你，尽量别用怪异格式，现代浏览器基本支持稳稳的。这样设，页面背景图分分钟稳坐中军帐。
添加评论