一个盒子在另一个盒子里面垂直水平居中方法

1.给小盒子里面加个span标签，给里面的盒子写display：inline-block转换成行内块元素，用vertical-align：middle设置垂直向中间对齐；给父元素设置行高=盒子高度，然后加上text-align：center；

.box {

            width: 300px;

            height: 200px;

            background-color: aqua;

            line-height: 150px;

            text-align: center;

        }

.small {

            width: 100px;

            height: 50px;

            background-color: yellow;

            display: inline-block;

            vertical-align: middle;

        }

2.用定位的方式，给父元素加上相对定位position：relative；子元素加上绝对定位position：absolute（子觉父相），再配合top buttom left right都为0 加上margin：auto。

.box {

            width: 300px;

            height: 200px;

            background-color: aqua;

            position: relative;

        }

   .small {

            width: 100px;

            height: 50px;

            background-color: yellow;

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

        }

3用子觉父相 top left：50%配合盒子平移transform：translate（-50%，-50%）

.box {

            width: 300px;

            height: 200px;

            background-color: aqua;

            position: relative;

        }

 .small {

            width: 100px;

            height: 50px;

            background-color: yellow;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

4.弹性布局：给父元素设置弹性盒，水平方向居中 交叉轴方向居中。

.box {

            width: 300px;

            height:200px;

            background-color: yellow;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .small {

            width: 100px;

            height: 50px;

            background-color: red;

        }

5.利用网格布局，大盒子里面嵌套9个小盒子，给父元素设置display：grid;设置成三行三列的样式grid-template-rows：repeat（3，100px）grid-template-columns：repeat（3，100px）；给中间的小盒子起个名字 grid-template-areas：“. . .”“. a.”“. . .”；将第五个盒子占据区域a grid-area：a,然后设置个背景颜色就可以了。

 .box {

            width: 300px;

            height: 300px;

            border: 1px solid #333;

            display: grid;

            margin: 100px auto;

            grid-template-rows: repeat(3, 100px);

            grid-template-columns: repeat(3, 100px);

            grid-template-areas: ". . ."". a ."". . .";

        }

        .box .box5 {

            grid-area: a;

            background-color: red;

        }