前端面试题详解：CSS实现元素水平垂直居中(更新中)

第一种方法：position绝对定位 + CSS3里transform实现

本方法涉及知识点复习：

1、* { ... }

符号* 相当于选择器，代表html所有的元素，包括html标签、body标签等。
代码中将页面中的所有元素的margin，padding均设置为0。并设置整个页面背景色为#EAEAEA（灰白色）。

2、利用到CSS3中的transform属性

.box { ... }中，将首先设置

盒子的宽度/长度均为200px，背景色为#1E90FF（湖蓝色）。
然后设置该元素的position属性为absolute绝对定位，此时

脱离文档流（绝对定位使元素的位置与文档流无关），并且相对于最近的祖先元素定位。
注意：此时的top和left都设置成50%，容易陷入误区，认为

已经处于页面的正中间？但并不是，此时布局如下图：

定位原点是左上角，而非图片中心

因此我们还需要利用transform属性，transform: translate(-50%, -50%);使图片相对自己左移/上移动自身长度的50%。

参考连接：如何将窗口定位到页面中间