盒子水平垂直居中总结

1.基础做法

注意:盒子默认样式自行清除

利用定位实现

2.

2.利用transform实现

原理:利用translate根据自身来移动的特点实现

3.利用flex布局实现

原理:flex的基础属性

 4.特殊做法

注释;情况较为特殊 了解即可

一般使用第二三两种常用方法

参考代码如下：

第二种

.box {

            position: relative;

            /* 大盒子页面居中方便看效果 */

            margin: 100px auto;

            width: 400px;

            height: 400px;

            background-color: pink;

        }

       

        .box div {

            position: absolute;

            top: 50%;

            left: 50%;

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

            width: 100px;

            height: 100px;

            background-color: green;

        }

第三种

 .box {

            /* 大盒子页面居中方便看效果 */

            margin: 100px auto;

            width: 400px;

            height: 400px;

            background-color: pink;

            display: flex;

            justify-content: center;

            align-items: center;

        }

       

        .box div {

            width: 100px;

            height: 100px;

            background-color: rgb(236, 19, 128);

        }