CSS 中可使用以下代码水平居中图片：设置容器元素 text-align: center;。将图片设为内联块级元素 display: inline-block;。使图片垂直居中 vertical-align: middle;。垂直居中图片：将容器元素设为 flexbox display: flex;。使子元素垂直居中 align-items: center;。使子元素水平居中 justify-content: center;。限制图片大小 max-width: 100%;，max-height:
CSS 中图片居中显示代码
问题：如何使用 CSS 代码让图片在元素中水平和垂直居中显示？
回答：
水平居中
立即学习“前端免费学习笔记（深入）”；
.image-container {
text-align: center;
}
.image {
display: inline-block;
vertical-align: middle;
}垂直居中
电力公司企业网站(Zblog内核)1.8
下载
由于我高估了大家对zblog程序的熟知度，发现还有很多站长并不是太熟悉这款程序，甚至连后台的登陆入口都不清楚。所以我晚上抽了一点点时间把该ZBLOG企业网站源码进行的修正，补充了大家的一些问题。并且我写了比较详细的使用教程，能够帮助新手朋友修改变成自己的企业网站使用。 修订版本改进了几处问题： 第一，修正了单页面中的顶部BANNER FLASH幻灯图片的显示错误问题； 第二，修正了在产品中心标题显
.image-container {
display: flex;
align-items: center;
justify-content: center;
}
.image {
max-width: 100%;
max-height: 100%;
}详细说明：
水平居中
立即学习“前端免费学习笔记（深入）”；
-
text-align: center;将image-container元素设置为水平居中。 -
display: inline-block;将image元素设为内联块级元素，允许它与文本对齐。 -
vertical-align: middle;将image元素在垂直方向上居中，与 surrounding text 对齐。
垂直居中
-
display: flex;将image-container元素设为 flexbox，允许对其子元素进行灵活布局。 -
align-items: center;将image-container元素中的所有子元素在垂直方向上居中。 -
justify-content: center;将image-container元素中的所有子元素在水平方向上居中。 -
max-width: 100%;和max-height: 100%;限制image元素的大小，使其适应image-container元素的大小并保持纵横比。
