關於Css的垂直居中的一些方法

時間 2019-11-10

標籤關於 css 垂直居中一些方法欄目 CSS 简体版

原文原文鏈接

前兩種方法稱爲大體居中，通常偏差隨高度的減少而減少，不過通常來講不怎麼看得出來，除非你用javascript調用
offsetTop來查看。否則沒有強迫症的比較難看出來。可是兼容性很好，尤爲是table-cell的從IE6便可使用javascript

1.使用table-cell處理圖片間的關係css

父元素使用display:table-cell; vertical:middle
子元素使用display:inline-block; vertical:middle;

便可簡單使圖片居中html

2.使用line-height處理java

父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//這裏的line-heiht要跟父元素大小同樣；
子元素使用vertical-align:middle;

第三種稱爲絕對居中，不居中來找我，就是兼容性有點差，起碼要IE9 才能兼容，通常的webkit也都沒問題就是。隨着ES6的泛濫，很快老舊的瀏覽器也就成了古董，因此這個居中方法也挺不錯，就是對於兼容性很高的項目，最好不要使用。可是有問題的是，必須指定height，由於顯然，這邊計算的是下移50%的當前高度的Y軸。而前面兩種方法不須要
3.使用translateY來垂直居中web

父元素使用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 參考自如下文章ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。