关于这个问题，方法挺多，自己喜欢哪个都可以喽。。。。。
在页面引入了reset.css样式后，我们先来确定html布局：
<div class="parent" style="width:300px;height:300px;background-color:#ccc;">
<img class="child" src="../images/cat1.jpg" alt="">
</div>一，水平居中
1，利用margin:0 auto;可以使块级元素水平居中；
.child{
display: block;
margin: 0 auto;
}2，利用text-align:center;使文本内容水平居中；
.parent{
text-align: center;
}3，利用绝对定位+transfrom使图片水平居中；
代码太简单，不想放了4，已知图片宽高时，利用绝对定位+margin-left:(一半的负值)使图片水平居中；
代码太简单，不想放了5，对父级使用display:flex;使图片水平居中；
代码太简单，不想放了6，对父级使用display:flex;使图片水平居中；
代码太简单，不想放了二，垂直居中
1，对父级设置line-height:height;图片设置vertical-align:middle;使图片水平居中；
.parent{
line-height: 300px;
}
.child{
vertical-align: middle;
}2，使用display:table-cell；对图片的直接父级加display:table-cell;vertical-align:middle;
.parent{
display: table-cell;
vertical-align: middle;
}
