块级元素水平垂直居中的5种技巧

    元素居中分为水平居中，垂直居中，还有水平垂直居中这三类。其中文本元素和块元素的居中方式又有略微不同。平时工作中我们最常见的就是块级元素的水平垂直居中和文字的水平居中了。下面是几种块级元素水平垂直居中的方式。

    方式1：margin: auto + 绝对定位 

.wrapper {
    position: relative;
    background: yellow;
    width: 500px;
    height: 300px;
}
.block {
    background: red;
    width: 150px;
    height: 150px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

    同理，固定定位也是可以的，主要就是设置子元素的margin,left,top,right,bottom值。
方式2: calc 计算函数 + 相对定位

.wrapper {
    position: relative;
    background: yellow;
    width: 500px;
    height: 300px;
}
.block {
    position: relative;
    background: red;
    width: 150px;
    height: 150px;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
}

     calc函数在css中用于动态计算长度值，运算符前后务必加上空格，否则计算结果不会生效。left: calc(50% -75px) ,可以理解为，子元素先向右偏移父元素宽度的50%, 然后又向左偏移子元素宽度的一半，也就是75px,这样一来子元素在水平方向上就居中了。top的距离偏移计算同理。子元素的定位方式也可以是绝对定位，这种居中的技巧本质就是计算好偏移距离。

    方式3：transform

.wrapper
{
    width:500px;
    height:500px;
    background-color:yellow;
}
.block
{
    width: 100px;
    height: 100px;
    background: red;
    transform: translate(200%, 200%)
}

     transform 属性允许你旋转，缩放，倾斜或平移给定元素。本质上这种居中技巧是建立在平移量的精准计算之上的。

    方式4：display: flex + 主侧轴居中对齐

.wrapper {
    background: yellow;
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center
}
.block {
    background: red;
    width: 150px;
    height: 150px;
}

 方式5：display: flex + margin: auto

.wrapper {
    background: yellow;
    width: 500px;
    height: 300px;
    display: flex;
}
.block {
    background: red;
    width: 150px;
    height: 150px;
    margin: auto;
}

     平时工作中最常用的就是通过flex弹性盒子来做元素的水平垂直居中，因为这种方式不需要刻意计算各种偏移距离，只要设置主轴和侧轴的对齐方式就行了。margin: 0 atuo 常用来设置块级元素的简单水平居中。