容器佈局垂直居中

本案例記錄的是前端中容器居中的案例

方式1:定位子絕父相

    <div style="height: 100px;width:200px;background: lime;position: relative">
        <div id="center_method_one">
            <p>子佈局</p>
        </div>
    </div>

css樣式,設置子佈局絕對定位,距離左上父親佈局的一半,然後向左上移動自身的一半即可

        #center_method_one{
            background-color: red;
            position: absolute;
            margin: auto;
            width: 70px;
            top:50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

 方式2:使用flex

        .father{
            margin-top: 60px;
            background-color: lime;
            width: 100px;
            height: 100px;
            display: flex;
            flex-direction: row;
            /*垂直居中*/
            align-items: center;
            /*水平居中*/
            justify-content: center;
        }

        .child{
            background-color: red;
            width: 50px;
            height: 50px;
        }

文本居中: 設置行高和高度一致  如 line-height:80px 

 

設置子佈局的寬高比:

height:0   和   padding-bottom 50%即可

 

 

array遍歷

    arrayHere.forEach(function (value, key) {
        console.log("key = "+key+"   value = "+value);
    });