css布局 布满整个页面、 左右布局（自适应）、宽高自适应、元素居中

1、布满整个页面
css

 <style>
        /* 用百分比设定元素的宽度，一般情况是指参考父元素的宽度，当position是fixed或absolute时，百分比是参考屏幕的宽度。left:x%等位置属性的百分比也是参考屏幕的宽度。 */
        /* 注：absolute可换为fixed */
        /* 法一 */
        /* .container{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: green;
        } */
        /* 法二 */
        /* body{
            margin: 0;
        }
        .container{
            position: absolute;  
            width: 100%;
            height: 100%;
            background-color: green;
        } */
        /* 法三 */
        html,body{
            height: 100%;
            margin: 0;
        }
        .container{
            width: 100%;
            height: 100%;
            background-color: green;
        }
    </style>

html

<div class="container"></div>

2、元素居中

 <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box > div{
            width: 50px;
            height: 20px;
            background-color: red;
        }

        /* flex布局 */
        /* .box{
            display: flex;
            justify-content: center;
            align-items: center;
        } */

        /* table-cell */
        /* .box{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .box > div {
            display: inline-block;
        } */

        /* 绝对定位 0*/
        /* .box{
            position: relative;
        }

        .box > div{
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        } */

        /* 绝对定位 margin */
        /* .box{
            position: relative;
        }

        .box > div{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -25px;
        } */
 
        /* 绝对定位 translate */
        /* .box{
            position: relative;
        }

        .box > div{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        } */
    </style>

 <div class="box">
        <div></div>
    </div>