CSS中如何让图片在盒子里居中及居中对齐的方法
说到CSS让图片居中，哎呀，这事儿其实有不少办法，大家经常搞混，别急，我帮你理理思路。你知道吗，最简单的办法就是给图片的父级盒子设置text-align: center;，像这样：
div {
text-align: center;
}
然后把你的<img>标签放进这个div里，图片就会水平居中了，非常省心。当然，这仅限于让图片水平居中，如果你想知道垂直居中咋整，咱们后面继续说。用html时，先新建个html文件，在body标签里放个div，再塞张图片，浏览器打开就能看到效果。
另外一个经典方法是用margin: 0 auto;搭配display: block;，这样图片作为块元素，两边自动留白，保证图片水平居中，代码长这样：
img {
display: block;
margin: 0 auto;
}
这招儿超级实用，尤其是当你不想用父元素来控制的情况。
CSS中背景图片如何缩放并且居中显示以及其他技巧
背景图片居中你知道咋搞吗？先给你说个秘密，background这个简写属性真是太强大了，直接帮你搞定“图片居中”，写法是这样的：
background: url('image.jpg') no-repeat center center;
这里的第一个center是左右居中，第二个center是上下居中，两个合起来就是完美居中啦。嘿嘿，简单到不行有没有，又好看又专业。
那么，如果背景图片尺寸比容器小怎么办呢？不用怕，可以设置background-size来控制图片大小：
- 如果你想保持原图尺寸不变，用
background-size: auto;就行。 - 想让图片铺满容器，用
background-size: cover;，这样图片会自动裁剪拉伸，保证填满盒子。 - 还有
background-size: contain;，能保证图片完整显示，不过可能会留白。
顺便说个小tip，兼顾响应式的时候，背景图片居中超实用，特别是做装饰没啥交互的时候，简单偷懒小妙招。
另外，垂直居中图片也有不少套路，比如说：
- line-height法 - 设置父元素的
line-height等于它的高度，当里面只有一张图片或者一行文字时，能完美垂直居中。 - padding法 - 利用内边距调整视觉居中效果，适合复杂布局。
- absolute定位法 - 给图片
position: absolute;，然后top、bottom、left、right都设为0，再配合margin:auto;，图片居中没跑。
这些方法都在不同场景下一招见效，你得按需选。
相关问题解答
-
CSS里图片怎么水平和垂直同时居中呢?
哎呀，这个问题问得好！其实呢，你可以用flex布局，超级简单：给父元素设置display: flex; justify-content: center; align-items: center;，图片立马水平垂直双中无压力。如果flex还不熟，position: absolute加transform: translate(-50%, -50%)也是不错的选择，酷炫又灵活。 -
背景图片设置居中后为什么有时没有铺满容器呢?
嘿，这事儿多半是因为你没设置background-size。如果你想背景图铺满，记得加个background-size: cover;。这样图片就会自动拉伸裁剪填满容器，不留空白，非常完美。 -
使用
margin: 0 auto让图片居中有什么限制吗?
哦，当然有啦！这招儿只适用于块级元素（block），所以你得先给图片设置display: block;。还有，这方法主要是水平居中，垂直居中得用别的方法，不过水平居中它真是经典又好用。 -
为什么用
text-align: center设置图片居中，有时图片还是偏左啊?
哈哈，这一般是因为图片默认是inline元素，text-align: center对行内元素有效，但如果你给图片设置了其他样式比如display: block，那就得改用其他居中技巧啦。确保图片没被“块化”，否则你得用margin法或者flex。
本文来自作者[黄诗淇]投稿，不代表跃庆号立场，如若转载，请注明出处：https://www.mingcaifu.com/changshi/202511-myJDEdj9A8y.html
评论列表（3条）
我是跃庆号的签约作者“黄诗淇”
本文概览：CSS中如何让图片在盒子里居中及居中对齐的方法 说到CSS让图片居中，哎呀，这事儿其实有不少办法，大家经常搞混，别急，我帮你理理思路。你知道吗，最简单的办法就是给图片的父级盒子...
文章不错《CSS中怎样让图片居中 CSS背景图片如何居中缩放》内容很有帮助