详解实现CSS2/CSS3垂直水平居中的几种方式

设置基础样式 两层盒子

 /* 基础样式 */
    .box {
        width: 800px;
        height: 600px;
        background: greenyellow;
    }

    .inner {
        width: 20%;
        height: 20%;
        background-color: hotpink;
    }

HTML布局

   <div class='box'>
        <div class='inner'>

        </div>
    </div>

CSS2实现的2种方式

第一种 子元素行内块

1. 子元素行内块
2. 父元素行内居中，行高和自身高度一致

   .box {
        text-align: center;
        line-height: 600px;
    }
    .inner {
        display: inline-block;
    }

第二种 定位（需已知子元素宽高）
1. .父相子绝
2. 子元素 左/右 上/下 定位父元素的50%
3. 子元素外间距左/右 上/下 自身50%px

    .box {
        position: relative;
    }
    .inner {
        left: 50%;
        top:50%;
         width: 120px;
        height: 120px;
        position: absolute;
        margin-left: -60px;
        margin-top: -60px;
    }

CSS3 实现的4种方式

第一种 定位+平移
1. 父相子绝
2. 子元素 左/右 上/下 定位父元素的50%
3. 子元素外间距 左/右 上/下 平移自身50%

    .box {
        position: relative;
    }
    .inner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

第二种 flex布局（最推荐，最简单）
1. 父元素 设置 flex，竖轴横轴分别设置子元素居中排列

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

第三种 转换属性为表格单元格
1. 父元素 设置 table-cell 子元素设置 行内块
2. 父元素 行居中 垂直居中

  .box {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
.inner {
        display: inline-block;
    }

第四种 定位配合margin
1. 子元素 绝对定位 自动margin
2. 父元素 相对定位

 .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .box{
        position: relative;
    }

如果小伙伴还有更多想要了解或者需要补充的，欢迎在下面评论或者私信我。