JS/jquery/CSS总结

1. 小div在大div中水平垂直居中

方法一：使用定位的方法

            //大div
            .parent {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                position:relative;
            }

            //小div
            .child {
                width: 100px;
                height: 100px;
                border: 1px solid violet;
                position:absolute;
                top: 50%;
                left:50%;
                margin-top: -50px;     /*这里是小盒子高的一半*/
                margin-left: -50px;    /*这里是小盒子宽的一半*/
            }   

方法二:利用定位及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;
            }

方法四:使用伸缩布局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;