前端面试之水平垂直居中——几分钟搞定四种css水平垂直居方案

我们要对元素进行水平居中处理，核心的思想就是改变元素的位置，让元素轴中心处于容器中心即可。
为了让我们子元素位于父容器的中心，首先要脱离正常的文档流，相对于我们父元素进行定位。这样我们的移动才是针对父元素的。

方案：

一、margin负值（子元素操作）

absolute是利用margin定位，定位点为左上角

原理：

1. 绝对定位，相对父元素，且通过自身边界（margin）定位
2. 那么我们设置 子元素top:50%和left:50%就实现了 左上角这个点的水平垂直居中
3. 设置他的marginTop为高度一半负值，设置他的marginLeft为宽度一半负值就相当于把基准点从左上角变到了中心
4. 那就实现了水平垂直居中

实现：

• 一个父元素包裹子元素，子元素相对父元素相对定位

• 子元素宽度高度已知

• 那么我们首先直接设置top和left属性各位50%，看看效果

可以很明显看出，此时子元素并没有居中，而是子元素的左上角居中了。那么我们接下来就需要把我们的元素中心移动到左上角的位置

• 向左移动，向上移动元素宽度和高度一半即可(margin负值即可)

如图，此时我们的元素已经移动到父元素的中间了
或者是，我们元素的中心点移动到了父元素中的

总结：

• 父元素要绝对定位，子元素相对于父元素相对定位才行
• 子元素宽度高度必须知道：因为要进行中心点移动
• 理解margin为负

完整代码：

.parent