部分项目界面效果

前端实现元素水平垂直居中的九种方式

这是我的HTML结构：

<div class="parent">
        <div class="child"></div>
</div>

下面是我的CSS代码，分为九种方式实现：

1. 定位+margin:auto （推荐）

   .parent{
           position: relative;
           width: 400px;
           height: 400px;
           background-color: pink;
       }
       .child{
           position: absolute;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           margin: auto;
           width: 100px;
           height: 100px;
           background-color: brown;
       }
   

2. 定位+transform （推荐）

.parent{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: brown;
        }

3. 定位+margin

.parent{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left:-50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: brown;
        }

4. 定位+calc

.parent{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        } 
        .child{
            position: absolute; */
            top: 50%;
            left: 50%;
            margin-left:calc(-50px);
            margin-top: calc(-50px);
            /* 上面四行等同于下面两行 注意:使用calc的时候，运算符两边要留个空格，否则效果不会出现 */
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: brown;
        }

5. flex （推荐）

.parent{
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: pink;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: brown;
        }

6. grid

.parent{
            width: 400px;
            height: 400px;
            display: grid;
            justify-content: center;
            align-items: center;
            background-color: pink;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: brown;
        }

7. table-cell+vertical-align: middle

.parent{
            width: 400px;
            height: 400px;
            display: table-cell;
            vertical-align: middle;   //或者使用line-height代替
            text-align: center;
            background-color: pink;
        }
        .child{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: brown;
        }

8. table-cell+line-height

.parent{
            width: 400px;
            height: 400px;
            display: table-cell;
            line-height:400px;
            text-align: center;
            background-color: pink;
        }
        .child{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: brown;
        }

9. flex+margin:auto （推荐）

.parent{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: pink;
        }
        .child{
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: brown;
        }

好了，以上就是实现元素水平垂直居中的九种方式，亲自在浏览器中调试过了，都是没有问题的，具体代码文件已经上传。