如何让一个行内元素（如一张图片）在div中居中
思良：我就是用的方法4
（1）第一种：用vertical-align
<div class="method1"> <span class="tiptop"></span> <img class="test" src="img/Dota2.jpg" alt="dota2"> </div> <style> .method1{
text-align:center;
}
/*vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的， 而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了, 在下面的<img>设置vertical-align就生效了*/ .tiptop{
height:100%;
display:inline-block;
vertical-align:middle;
}
img{
vertical-align:middle;
}
</style>
（2）第二种：flex布局（注意浏览器兼容性）
<div class="method2"> <img src="img_p1_title.png"> </div> <style> .method2 {
display: flex;
justify-content: center; //弹性盒子对象在主轴上的对齐方式 align-items: center;
//定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 background-color:#00a0e9;
height:200px;
}
.method2 img {
width:20px;
height:30px;
background-color:#0A58A0;
}
</style>
（3）position:absolute;绝对定位方式
<div class="method3"> <span>第三种方法</span> </div> <style> .method3 {
width:100%;
height: 200px;
font-size: 18px;
position: relative;
background-color:#00a2d4;
}
.method3 span {
width:100px;
height:100px;
background-color:#00ACED;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
（4）使用display:table-cell配合vertical-align:center（淘宝也是这样用的）
<div class="method4"> <span>第四种方法</span> </div> <style> .method4 {
width: 200px;
height: 200px;
vertical-align: middle;
display: table-cell;
/*只支持IE8+及现代浏览器，与position:absolute;或float:left;属性尽量不一起用*/ text-align: center;
background-color:#00ACED;
}
.method4{
width:100px;
height:100px;
background-color:#0A58A0;
}
</style>
原文：http://blog.csdn.net/liaozhongping/article/details/77987014
