HTML元素居中方式

原始样式：

            .box {
                width: 100%;
                height: 600px;
                background-color: lightblue;
            }
            .content {
                width: 200px;
                height: 200px;
                background-color: orange;
            }

第一种方法：使用flex布局+justify-content+align-items

            .box {
                width: 100%;
                height: 600px;
                background-color: lightblue;
                /* 父元素设置为flex布局 */
                display: flex;
                /* 元素在x轴方向居中 */
                align-items: center;
                /* 元素在y轴方向居中 */
                justify-content: center;
            }
            .content {
                width: 200px;
                height: 200px;
                background-color: orange;
            }

 

 

第二种方法：使用grid布局+margin:auto

            .box {
                width: 100%;
                height: 600px;
                background-color: lightblue;
                display: grid;
            }
            .content {
                margin: auto;
                width: 200px;
                height: 200px;
                background-color: orange;
            }

 

 

第三种方法：使用子绝父相+top:50% left:50%+transform:translate(-50%,-50%）

            .box {
                width: 100%;
                height: 600px;
                background-color: lightblue;
                position: relative;
            }
            .content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 200px;
                height: 200px;
                background-color: orange;
            }