下面是用纯CSS实现容器内图片上下左右居中的攻略：
在实现图片上下左右居中之前，必须满足以下两个前提条件：
要实现图片水平居中，可以给父容器设置text-align属性为center，再将图片的display属性设置为block即可，示例代码如下：
.container {
width: 500px;
height: 300px;
text-align: center;
}
.container img {
display: block;
}
要实现图片垂直居中，可以使用CSS3的flex布局，先将父容器设置为flex布局（display: flex），再将子元素（即图片）设置为垂直居中（align-items: center），示例代码如下：
.container {
width: 500px;
height: 300px;
display: flex;
align-items: center;
}
.container img {
display: block;
}
要实现图片在父容器中上下居中，可以先实现水平居中，再利用绝对定位将图片上移一半的高度（即margin-top: -图片高度的一半），示例代码如下：
.container {
width: 500px;
height: 300px;
text-align: center;
position: relative;
}
.container img {
display: block;
position: absolute;
top: 50%;
margin-top: -50px; /* 假设图片高度为100px */
}
要实现图片在父容器中左右居中，可以先实现垂直居中，再利用绝对定位将图片左移一半的宽度（即margin-left: -图片宽度的一半），示例代码如下：
.container {
width: 500px;
height: 300px;
display: flex;
align-items: center;
position: relative;
}
.container img {
display: block;
position: absolute;
left: 50%;
margin-left: -50px; /* 假设图片宽度为100px */
}
以上就是用纯CSS实现容器内图片上下左右居中的完整攻略。
本文链接：http://task.lmcjl.com/news/15735.html