水平居中，垂直居中常用的解决方案第1种，垂直居中-水平居中-伪类css2.0兼容性最好伪类和伪元素的区别https://

第1种，垂直居中-水平居中-伪类

css2.0 兼容性最好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .box-wrap {
            margin: 0 auto;
            display: block;
            border: 1px solid #f00;
            width: 700px;
            height: 700px;

            text-align: center; /* 使得子元素(inline,inline-block) 水平居中*/
        }
        .box-wrap:after {
            content: ' ';
            height: 100%; /* height为.box-wrap的高度*/ 
            display: inline-block; /* 行内块元素，可以设置 width，height 还是inline表现的样式*/
            vertical-align: middle; /*水平居中*/
        }
        .box-content {
            display: inline-block; /* 必须 */
            vertical-align: middle; /*垂直居中*/

            
            width: 400px;
            height: 200px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div class="box-wrap">
        <div class="box-content">
            content
        </div>
    </div>
</body>
</html>

伪类和伪元素的区别 www.cnblogs.com/andy-lehhax…

第2种，垂直居中-水平居中-transform

css3.0，兼容性IE9以上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .box-wrap {
            margin: 0 auto;
            border: 1px solid #f00;
            width: 700px;
            height: 700px;
        }
       
        .box-content {
            /*相当于父盒子高度的一半*/
            margin-left: 50%; 
            margin-top: 50%;
            /*相当于自己盒子宽度的一半 高度的一半*/
            transform: translate(-50%, -50%); 
            width: 400px;
            height: 200px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div class="box-wrap">
        <div class="box-content">
            content
        </div>
    </div>
</body>
</html>

第3种，垂直居中-水平居中-弹性盒子

css3.0，兼容性IE9以上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .box-wrap {
            margin: 0 auto;
            border: 1px solid #f00;
            width: 700px;
            height: 700px;

            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .box-content {
            width: 400px;
            height: 200px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div class="box-wrap">
        <div class="box-content">
            content
        </div>
    </div>
</body>
</html>