在网页设计中，图片是不可或缺的元素。而当图片的尺寸比父容器要小，或者父容器的宽度和高度不确定时，图片如何居中显示就成了一个问题。对于这个问题，我们可以通过 css 的 flex 布局和 position 属性来进行解决。
一、使用 flex 布局
Flex 布局是 CSS3 引入的一种新的布局方式，它能够灵活地控制容器的布局方式，在父容器中居中子元素非常容易。
1.使用justify-content和align-items属性
我们可以使用 flex 布局中的 justify-content 和 align-items 属性来实现图片的水平和垂直居中。其中 justify-content 属性可以控制子元素在主轴方向上的布局，align-items 属性则可以控制子元素在交叉轴方向上的布局。
立即学习“前端免费学习笔记（深入）”；
首先，我们需要将图片的父容器设置为 display:flex，并且设置 align-items 和 justify-content 为 center。
.parent { display: flex; justify-content: center; align-items: center; }
这样，图片就水平和垂直居中了。
2.使用flex-direction和align-self属性
我们也可以使用 flex 布局中的 flex-direction 和 align-self 属性来实现图片的居中。flex-direction 属性可以改变主轴的方向，而 align-self 属性可以控制子元素在交叉轴方向上的布局。
将图片的父容器设置为 display:flex，并且设置 flex-direction 为 column。
.parent { display: flex; flex-direction: column; }
接下来，我们需要将图片的 align-self 属性设置为 center 即可实现图片的垂直居中。
img {
align-self: center;
}二、使用 position 属性
八梦企业网站源码v1.0 是由八梦网络工作室开发的一款企业网站源码，适合一般中心企业使用。网站功能完善，操作简单。后台可以直接发布文章、图片。网站采用DIV+css布局、可以生成静态，符合SEO优化。目前主要的板块有 关于我们、联系我们、新闻动态、产品中心、客户案例。如果需要可以进行增加，不懂可以联系我们。程序采用asp+access搭建，空间必须要支持ASP，都可以访问。一般100M就够用了。
除了使用 flex 布局外，我们也可以使用 position 属性来实现图片的居中。使用 position 属性的方法会有些不同。
1.使用绝对定位
我们可以将图片设置为绝对定位，然后使用 left 和 top 属性来控制图片在父容器中的位置。将父容器的 position 设为 relative，这样图片就可以相对于父容器进行定位。
.parent { position: relative; } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
这样，图片就水平和垂直居中了。
2.使用负边距
我们也可以使用负边距来实现图片的居中。这种方法是在父容器中加入额外的元素来实现的。将父容器设置为 position:relative，并且添加一个空元素，在空元素中放置图片。
.parent { position: relative; } .placeholder { height: 100%; margin-right: -100%; } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
这样，图片也可以水平和垂直居中。
要点总结
在进行图片居中时，我们可以使用 flex 布局和 position 属性来实现。在使用 flex 布局时，我们可以使用 justify-content 和 align-items 属性，也可以使用 flex-direction 和 align-self 属性。在使用 position 属性时，我们可以将图片设置为绝对定位，也可以使用负边距来实现。
总体来说，使用 flex 布局更加灵活和简单，但需要使用 CSS3，而使用 position 属性则更加兼容老版本浏览器。在实际应用中，我们可以根据情况来选择使用哪种方法来实现图片的居中显示。
