1.图片水平居中
1-1: 使用text-align:center让图片居中
给img元素的父级元素添加text-align属性
<div style="width: 400px; height: 300px; border:1px solid red; text-align:center"> <img src="8104044_230939695000_2.jpg" style="width: 80%;"> </div>
1-2: 使用margin:0 auto使得图片水平居中
img元素结合display:block;属性
1 <div style="width: 400px; height: 300px; border:1px solid red;"> 2 <img src="8104044_230939695000_2.jpg" style="width: 80%; display:block; margin:0 auto;"> 3 </div>
2. 图片垂直居中
2-1:使用line-height属性，给父元素添加行高，img结合vertical-align:middle;
1 <div style="width: 400px; height: 300px; border:1px solid red; line-height:300px;"> 2 <img src="8104044_230939695000_2.jpg" style="width: 80%; vertical-align: middle; "> 3 </div>
2-2:利用table实现垂直居中；结合着vertical-align:middle使用
1 <div style="width: 400px; height: 300px; border:1px solid red; display: table-cell; vertical-align: middle;"> 2 <img src="8104044_230939695000_2.jpg" style="width:80%; "> 3 </div>
2-3: 利用定位实现图片垂直居中
结合c3的transform属性的translate
1 <div style="width: 400px; height: 300px; border:1px solid red; position: relative;"> 2 <img src="8104044_230939695000_2.jpg" style="width:80%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);"> 3 </div>
tip:以上图片只是垂直居中
2-4.利用flex布局
css3中的flex布局方式，
1 <div style="width: 400px; height: 300px; border:1px solid red; display: flex; align-items: center; justify-content: center;"> 2 <img src="8104044_230939695000_2.jpg" style="width:80%;"> 3 </div>
tip:利用justify-content:center;让子元素水平居中
原文：https://www.cnblogs.com/browse/p/10159899.html