面试总结-百度一面总结（一）

总结

在我们设计网页的过程中，经常需要一些dom元素在其父元素或者相对于网页是水平垂直居中的，例如：登录页面让登录窗口居中显示，以下是我总结的几种常用方法。

本题考察：css的灵活运用

第一种方法：使用绝对定位实现

css如上图所示，先将inner的父元素相对定位（position：relative；），再将inner水平居中（margin： auto；），然后对inner进行在父元素wraper中绝对定位（position： absolute；），并将其top、right、bottom、left属性设置成0，从而实现inner在wraper中的水平垂直居中。

---

第二种方法：使用display:flex实现

这种方法面试当时也是没有想到，面试的hr也提醒了我使用flex，但是确实没有实际操作过这个属性，实现的css代码如下：

该方法先将inner的父元素display属性设置成flex，再将inner的margin属性设置成auto，这里相当于（margin：auto auto；），可以将其简写成（margin：auto；），但是前提是其父元素display属性为flex。

---

第三种方法：使用负margin法实现（推荐：兼容性最好）

css代码如上图所示，先将inner父元素进行相对定位（position：relative；），再将inner进行绝对定位（position： absolute；），然后使用（top：50%；left：50%；）将inner这个div的左上顶点定位在wraper的正中央，之后通过负margin法将inner向左上方移动实现inner的水平垂直居中。

ps：此方法前提知道尺寸

第四种方法：使用css3中transform属性实现

此方法与负margin法有着异曲同工之妙，css代码如下：

该方法与负margin法极其相似，先将两个div定位，也是将inner这个div左上顶点定位在wraper的中心点，然后使用transform下的translate属性将inner向左上方移动，从而实现效果。

---

作者：孙以哲

未完，待续