几种经典的居中技巧（垂直和水平居中）

技巧一（推荐指数★★★★★） 采用top、right、bottom、left，可以不在乎父元素的宽度和高度，对GPU损耗低于技巧三，但是对浏览器内存的消耗高于技巧三

.子元素 {
        /*父元素需要position: relative|absolute;*/
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 100px;
    }

技巧二（推荐指数★★★☆☆）要计算宽度、高度，仅适用于定宽定高的子元素，具有一定局限性

.子元素 {
        position: absolute;
        width: 宽度px;
        height: 高度px;
        margin-left: calc(-宽度 / 2);
        margin-top: calc(-高度 / 2);
        left: 50%;
        top: 50%;        
    }

技巧三（推荐指数★★★★☆）渲染快，可以不在乎父元素和子元素的宽度和高度，特别适用于当某段动态文本（子元素）在div（父元素）内需要水平垂直居中的情况，不过需要改变子元素的position属性，如果position不能修改的情况建议使用技巧五，同时需要注意，如果该子元素还有其他兄弟元素，可能会对排版间距造成一些影响，因为这里用了translate属性

.子元素 {
        /*父元素需要position: relative|absolute;*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

技巧四（推荐指数★★★☆☆）只对全局居中有效，如果在某个div内部还需要计算父级div宽度高度，100vh和100vw就需要换成父元素的高宽

.子元素 {
        margin-top: calc(100vh / 2);
        margin-left: calc(100vw / 2);
        transform: translate(-50%, -50%);
    }

技巧五（推荐指数★★★★☆）只需要对父元素进行设定，不需要管子元素死活，美中不足在实际使用过程我们往往只会关注子元素，如果修改父元素的这些属性将会导致一系列的连锁反应，因为父元素可能还包含了其他子元素，如果非得要使用该方法，建议父元素只有唯一子元素的时候使用吧！特别适用于div（父元素）内有动态文本（子元素）需要水平垂直居中的情况，不过这会修改父元素的display属性，如果不允许修改display的情况下建议使用技巧三

.父元素{
        display: flex;
        justify-content: center;
        align-items: center;
    }