第一次WEB前端技术面试得第一道技术题div居中

周四的时候我迎来了我的第一次技术面试，当然充满了紧张，以致于我没反应过来面试官的问题，我的第一道技术题是如何实现一个div居中显示，十分紧张的我脱口而出了flex布局，当然这不是正确的答案，经过我不过大脑脱口而出的一系列没有逻辑的回答，我立马认识了我的错误，脱口惹出“不好意思，我还是太菜了”

等到我面试完冷静下来后，我发现其实很简单

方法一：

           position:absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

top、bottom、left、right的值相等就好。

方法二：

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

其实方法二我说了但是只说了前三行，但最后一行代码很重要，因为前三行代码只是让盒子距离屏幕上方和左方50%的距离，并不能实现居中显示，最后一行代码是让盒子向上和向左移动了本身的高度和宽度的50%，最终实现水平居中的效果。

如果想实现盒子里面的盒子居中显示，则只需在父盒子里加入以下三行代码

            display:flex;

            justify-content: center;

            align-items: center;

所以大家在面试的时候千万不要紧张，也不要急着回答，认真把面试官的问题想一遍后再回答，作为一个应届毕业生，面试的问题没有那么难，把基础打好就行。