前兩種方法稱為大致居中,一般誤差隨高度的減小而減小,不過一般來說不怎麼看得出來,除非你用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 參考自以下文章