共计 2341 个字符，预计需要花费 6 分钟才能阅读完成。
做为一个前端设计人员，对于yabo亚博88的产品展示 的设计一定不会陌生，其中产品 图片 摆放是必定经历的一步，并且 水平 居中 和垂直 居中又是最多的。
收集了一些 ，供大家学习！
1. 利用 display:table-cell，具体代码如下：
html 代码如下：
css 代码如下：
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; // 主要是这个属性
vertical-align: middle;
text-align: center;
2、css 图片水平居中
利用 margin: 0 auto 实现图片居中就是在图片上加上 css 样式 margin: 0 auto 如下：
3、css 图片垂直居中
利用高 == 行高实现图片垂直居中
这种方法是要知道高度才可以使用，代码如下：
4、采用背景法：
html 代码如下：
css 代码如下：
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
background: no-repeat center center;
}
5、利用绝对定位实现图片垂直居中
如果已知图片的宽度和高度可以这样，代码如下：
6、移动端可以利用 flex 布局实现 css 图片垂直居中
移动端一般浏览器版本都比较高，所以可以大胆的使用 flex 布局，（flex 布局参考 css3 的 flex 布局用法）演示代码如下：
css 代码：
html 代码：