css必学之垂直水平居中

css面试题当中最常见的就要数垂直水平居中了，在日常的工作当中，解决垂直水平居中也是各种方法，大家常用的是flex布局，但是单单回答这个问题，面试官常常不够满意，下面我来给大家总结一下常规的几种方案，以及面试官会问的点。

一：flex布局

先上代码，新手可以把代码复制到本地运行，方便理解。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直水平居中</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div>
            我要垂直水平居中
        </div>
    </div>
</body>
</html>

实际效果

总结：

div1这个元素必须要知道宽高才能把它设置成flex布局；
确定好布局之后，要确定里面元素的要按照水平方向摆放还是垂直方向，用到flex-direction: row; 默认是水平方向，因此这个属性可以省略不写，初学者不太理解，可以写上；
确定好方向为从左到右之后，justify-content: center; 是在水平轴的最中间；justify-content就是决定元素在主轴上的排列方式；
align-items决定元素在侧轴上的排列方式；

上面那些部分有点绕，简单来说，就是先通过flex-direction 来设置主轴的方向，justify-content 是设置主轴上元素，align-items处理侧轴上的元素，实际场景当中试一下就可以理解了。
面试官会问，怎么确定主轴与侧轴

二：使用transform

先上代码，新手可以把代码复制到本地运行，方便理解。

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直水平居中</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
        .div2 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">
            我要垂直水平居中
        </div>
    </div>
</body>
</html>

实际效果

总结

首先将div1通过position: relative;设置div1元素为相对定位；
div2 通过position: absolute;设置div2为div1的相对定位；
left 50%，top 50%，是以div2左上角作为坐标点进行的向左距离50%，向上距离50%；
看一下实际效果
因为要垂直水平居中，明显上面的设置是不够的，距离左边，距离上面都要减去自身的一半宽度和一半高度；
使用transform: translate(-50%, -50%);可以将自身向左偏移一半的自身的宽度和向上偏移一半的自身的高度。

面试官会考察这个top 50% 与translate -50%的区别

css必学之垂直水平居中

一：flex布局

二：使用transform

基本上掌握上面两种比较全能的方案就可以满足面试官的要求了。