关于CCS3水平垂直居中方法的总结

目录

一、行内元素（包含块元素）水平垂直居中：

方法1：行内元素转变为块元素

方法2：行内元素转变块元素并用子绝父相定位（比较复杂）

方法3：利用flex布局（相对简便）

二、多块级元素水平垂直居中：

方法1：子绝父相定位

 方法2：利用flex布局

方法3：利用inline-block行内块元素

方法4：利用表格布局实现子元素的水平和垂直居中

---

一、行内元素（包含块元素）水平垂直居中：

方法1：行内元素转变为块元素

第一步：创建盒子并设定宽高与背景色
第二步：在盒子内创建行内元素（a，img，input，lable，select，sapn......）
第三步：利用 display: block 属性将a标签转换为块级元素
第四步：利用 text-align: center 属性将a标签中的文本水平居中
第五步：通过给a标签设置相同的高度与行高使文本垂直居中

div{
    width: 200px;
    height: 200px;
    background-color: pink;

    a{
        display: block;
        text-align: center;
        height: 200px;
        line-height: 200px;
    }
}

效果图：

方法2：行内元素转变块元素并用子绝父相定位（比较复杂）

第一二三步同上
第四步：给定a标签的盒子大小(背景色)并调整到合适尺寸
第五步：利用子绝父相定位法则设置a标签到父元素盒子上下以及左右两端的距离各为50%

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    position: relative;

    a{
        position: absolute;
        display: block;
        width: 120.84px;
        height: 26px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: skyblue;
        // 给a标签盒子设置背景色是为了方便调大小尺寸
    }
}

效果图：

方法3：利用flex布局（相对简便）

第一二步同上
第三步：利用display: flex 属性将div设置为弹性盒子
第四步：利用相关属性将元素在主轴和侧轴两个方向上依次居中

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;

    a{
        // 无
    }
}

效果图：

二、多块级元素水平垂直居中：

方法1：子绝父相定位

第一步：创建并依次嵌套三层盒子，给定宽高和背景色
第二步：通过子绝父相定位法则实现第二层盒子的水平和垂直居中
第三步：让第三层盒子填充第二层盒子，给定外边距分开各小盒子距离
第四步：实现小盒子内部文本的水平和垂直居中
​
.box {
    height: 200px;
    background-color: pink;
    position: relative;

    .big-box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 606px;
        height: 160px;
        line-height: 160px;
        
        .small-box{
            float: left;
            width: 200px;
            height: 160px;
            line-height: 160px;
            text-align: center;
            background:#fff;
            margin-right: 3px;
        }
        .small-box:nth-child(3){
            margin-right: 0;
        }
    }  
}

效果图：

 方法2：利用flex布局

第一步：创建父盒子与子盒子，给定背景色和宽高
第二步：利用display: flex属性将父元素盒子设置为弹性盒子
第三步：利用flex布局的相关属性实现小盒子的水平和垂直居中
第四步：实现小盒子内部文本的水平和垂直居中

.box{
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;

    .small-box{
        width: 200px;
        height: 160px;
        line-height: 160px;
        text-align: center;
        background:#fff;
        margin: 0 3px;
    }
}

效果图：

方法3：利用inline-block行内块元素

第一步同上
第二步：使用display:inline-block属性将子盒子转化为行内块元素
第三步：通过给父元素设置水平居中属性来实现子盒子的水平居中
第四步：添加span标签并将其转变为行内块元素
第五步：通过给定span标签100%高度和vertical-align: middle属性使子盒子垂直居中
第五步：给定子盒子行高实现子盒子文本的水平垂直居中
​
.box {
    height: 200px;
    background-color: pink;
    text-align: center;

    .small-box{
        width: 200px;
        background:#fff;
        display: inline-block;
        height: 160px;
        line-height: 160px;
    }
    span{
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }   
}

效果图：

方法4：利用表格布局实现子元素的水平和垂直居中

第一步同上
第二步：给父盒子设置display: table属性
第三步：给子盒子设置display: table-cell属性
第四步：给子盒子内部文本设置水平和垂直居中属性
第五部：给子盒子添加边距以此分开各个盒子

.box {
    height: 300px;
    margin: auto;
    display: table;
    border: 3px dashed #333;

    .small-box{
        width: 300px;
        background: pink;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border: 20px solid #fff;
    }
}

效果图：