css里面怎么把图片水平和垂直居中
说起图片居中，咱们得先把水平和垂直两个方向都考虑到，不然总感觉哪里怪怪的。其实，实现图片的水平和垂直居中，你可以用好几招：
-
水平居中：最简单粗暴的就是给图片添加
margin: 0 auto;，记得图片要是display: block;，这样就能轻轻松松水平居中了！ -
垂直居中：要垂直中，可不能光靠line-height（那只能针对文字），对于图片来说，可以用定位或者弹性盒子：
-
定位法：给父容器设置
position: relative;，图片设为position: absolute;，然后设置上下左右为0，给图片margin: auto;，神奇地居中了！ -
Flexbox法：父容器设成
display: flex; justify-content: center; align-items: center;，天啊，这招绝了，水平垂直双中，代码简直美滋滋。
- 文字和图片同行的垂直居中：给图片加个
vertical-align: middle;，用点心思，图片和文字就能嗨翻天般对齐啦。
总之，别担心，入了这几招，搞定居中就是小菜一碟！
怎么让图片在div中精准居中显示和实用技巧
想让图片在div里完美居中，这里总结一下超实用的几波方法，亲测有效哦！
-
text-align + padding-top配合使用
这是个传统套路，给父div设text-align: center;，图片就水平居中了。然后给div加个padding-top，比如50px啥的，凑合凑合也能顶垂直居中效果。虽然不够灵活，但简单方便。 -
定位 + margin自动法
这招专业又灵巧：
- 父容器设position: relative;
- 图片设position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
这样，图片马上在div中上下左右居中。赞！
-
Flexbox布局
用flex简直就是居中神器：
- 父divdisplay: flex; justify-content: center; align-items: center;
- 图片自动水平垂直双居中，无敌顺畅。 -
display: table-cell方法
给父容器设为display: table-cell; vertical-align: middle; text-align: center;，图片瞬间对齐，比较古老但依然有效的方式。
总结下来啊，这四大法宝各有千秋，你一看情况放大招就好啦！
相关问题解答
-
CSS里最简单的图片居中方法是哪种？
哈哈，最简单的莫过于margin: 0 auto;配合display: block;啦！这俩玩意儿一搭档，图片马上水平中间，特别适合小白用。要是只是水平居中，这招绝对舒服得飞起，easy到爆！ -
Flex布局真的能完美居中图片吗？
完全没错！Flexbox 就是居中高手，给容器加上display: flex; justify-content: center; align-items: center;，哒哒哒，图片秒变中宫女神，水平垂直双重居中，代码写起来干净又利索，超推荐嘞！ -
图片和文字同行时，怎么让图片垂直居中？
这个嘛，给图片设置vertical-align: middle;，再保证在行内元素里，比如span或inline-block标签里，图片和文字立马亲密无间，整齐地排排坐。小技巧，轻松搞定排版难题哟！ -
定位法图片居中难不难理解？
别担心！其实定位法就是先把父容器定个位（position: relative;），然后给图片position: absolute;，设置上下左右都0，然后用margin: auto;，图片就乖乖地居中啦。看似复杂，操作起来很快就明白，特别适合想深度掌握布局的朋友尝试！
本文来自作者[祝志强]投稿，不代表优顿儿知识库立场，如若转载，请注明出处：https://www.udonr.com/jsss/202511-405TrjUrRf4.html
评论列表（3条）
我是优顿儿知识库的签约作者“祝志强”
本文概览：css里面怎么把图片水平和垂直居中 说起图片居中，咱们得先把水平和垂直两个方向都考虑到，不然总感觉哪里怪怪的。其实，实现图片的水平和垂直居中，你可以用好几招： 水平居中：最...
文章不错《css里面如何把图片居中 如何让图片在div中居中显示》内容很有帮助