前端开发常用知识点一：如何设置子div在父div中垂直居中显示？

在前端开发中，要设置子div在父div中垂直居中的情况有很多，现通过学习一些博主的博客及日常项目实战，总结如下几种最常用的方法：

方法一：display:flex（这是小博主最常用的设置垂直居中的方法！）

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                justify-content: center;  /*水平居中*/
                align-items: center;      /*垂直居中*/
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
            }

方法二：定位的方法

            .parent {
                width: 400px;
                height: 300px;
                border: 2px solid blue;
                position: relative;
            }
            .child {
                width: 150px;
                height: 100px;
                border: 1px solid pink;
                position: absolute;
                top: 50%;
                left:50%;
                margin-top: -50px;     /*这里是子div高的一半*/
                margin-left: -50px;    /*这里是子div宽的一半*/
            }            

适用情况：知道子div的宽高，可以不知道父div的宽高。

方法三：定位及margin: auto实现

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
             }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

方法四：display: table-cell

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                display: inline-block;
            }

方法五：计算四周的间距设置子元素与父元素之间的margin-top和margin-left（不推荐）

            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                margin-top: 50px;
                margin-left: 100px;
            }

参考博客：小div在大div里面水平垂直都居中的实现方法_buyaoxx的博客-CSDN博客

专注前端，用心分享，欢迎关注我的个人微信公众号，定有收获。