关于Css的垂直居中的一些方法
前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用javascript调用
offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好，尤其是table-cell的从IE6即可使用
1.使用table-cell处理图片间的关系
父元素使用display:table-cell; vertical:middle
子元素使用display:inline-block; vertical:middle;
即可简单使图片居中
2.使用line-height处理
父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//这里的line-heiht要跟父元素大小一样；
子元素使用vertical-align:middle;
第三种称为绝对居中，不居中来找我，就是兼容性有点差，起码要IE9 才能兼容，一般的webkit也都没问题就是。随着ES6的泛滥，很快老旧的浏览器也就成了古董，所以这个居中方法也挺不错，就是对于兼容性很高的项目，最好不要使用。但是有问题的是，必须指定height，因为显然，这边计算的是下移50%的当前高度的Y轴。而前面两种方法不需要
3.使用translateY来垂直居中
父元素使用position:relative;height:400px;
子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;
以下是全部代码，自己找张demo.jpg做实验就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<!--<link rel="stylesheet" href="./test.css">-->
<style>
span {
vertical-align: middle;
width: 300px;
height: 400px;
display: inline-block;
border: 1px red solid;
line-height: 400px;
}
.middle {
width: 100px;
/*vertical-align: middle;*/
position: relative;
}
.div {
height: 400px;
width: 500px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
.big {
width: 300px;
height: 100px;
position: relative;
border: 1px red solid;
}
.small {
width: 50px;
height: 50px;
position: relative;
transform: translateY(-50%);
top: 50%;
border: 1px red solid;
display: inline-block;
}
</style>
<body>
<span>
<img class="middle" src="./img/1.jpg" alt="">a
<img class="middle" src="./img/1.jpg" alt="">
</span>-->
<div class="div">
<img class="middle" src="./img/1.jpg" alt="呵呵">
</div>
<div class="big">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<img src="./img/1.jpg" style="width:100px;" class="small" alt="">
</div>
<script>
//计算自己要计算的元素的位置判断是否居中。
calc(true);
function calc(flag) {
var oheight = document.querySelector('.middle').offsetTop;
alert(oheight)
}
</script>
</body>
</html>
部分idea 参考自以下文章
