1.css中使得元素水平垂直居中的方法

• 基础代码

<template>
    <div class="body">
        <div class="children "></div>
    </div>
</template>

<style lang="less" scoped>
    .body{
        width: 100%;
        height: 100%;
        .children{
            width:200px;
            height:200px;
            background: red;
        }
    }
</style>

1.flex布局

   .body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .children{
            width:200px;
            height:200px;
            background: red;
        }
    }

2.栅格布局

    .body{
        width: 100%;
        height: 100%;
       display: grid;
        .children{
            align-self: center;
            justify-self: center;
            width:200px;
            height:200px;
            background: red;
        }
    }

3.position 加 transform

    .body{
        width: 100%;
        height: 100%;
        position: relative;
        .children{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width:200px;
            height:200px;
            background: red;
        }
    }

4.position+margin：auto

    .body{
        width: 100%;
        height: 100%;
        position: relative;
        .children{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width:200px;
            height:200px;
            background: red;
        }
    }

5.position+calc（50%-子元素的一半）

    .body{
        width: 100%;
        height: 100%;
        position: relative;
        .children{
            position: absolute;
            top: calc(50% - 100px);
            left: calc(50% - 100px);
            width:200px;
            height:200px;
            background: red;
        }
    }

6.position +margin -子元素的一半

    .body{
        width: 100%;
        height: 100%;
        position: relative;
        .children{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width:200px;
            height:200px;
            background: red;
        }
    }

7.writing-mode

<template>
    <div class="body">
        <div class="body-inner">
            <div class="children"></div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .body{
        width: 100%;
        height: 100%;
        writing-mode: vertical-lr;
        text-align: center;
        .body-inner{
            writing-mode: horizontal-tb;
            display: inline-block;
            width: 100%;
            .children{
                display: inline-block;
                width:200px;
                height:200px;
                background: red;
            }
        }

    }
</style>

8.line-height+vertical-align:middle

   .body{
        width: 500px;
        height: 500px;
         //width: 100vw; 
        //height: 100vh;
        //width: 100%; //无效
        //height: 100%; //无效
        line-height: 500px;
        background: yellow;
        text-align: center;
        .children{
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            width:200px;
            height:200px;
            background: red;
        }

    }

9.css table

       width: 500px;
        height: 500px;
        //width: 100vw;
        //height: 100vh;
        //width: 100%;
        //height: 100%;
        background: yellow;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        .children{
            display: inline-block;
            width:200px;
            height:200px;
            background: red;
        }

• 总结
  1.最后2中方法，父元素如果设成width 100%，height:100%是不生效的，不知道为啥，若有大佬看到这篇记录望指点迷津。