CSS实现定位、水平垂直居中的常见方法总结

今天面试刚开始还蛮顺利的，谁能想到最后栽在css的问题上呢。。。。
最后面试问了css的问题后，第一个是定位的问题，介绍一定位的方法？，relative和absolute分别相对于谁定位，脱不脱离文档流？

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。（这里我回答错了。。我说错相对于浏览器对象了？wtf？？）

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

absolute 在子div，它的父div必须有个position属性不是默认static的。这样它就可以以父类为参照进行定位
relative 是以自身为参照，意思就是它原本该在什么位置，加上relative属性后，会以它原本按照文档流应该在的位置为参照进行定位
absolute绝对定位，相对于最近的已经定位（position为absolute或者relative的元素）的祖先元素，relative相对定位，相对于本元素原始位置进行定位（记住这句话吧）
position取值absolute、relative与浮动float三者的区别

属性 是否脱离文档流 是否占位 是否影响周围元素在文档流中的位置

属性	是否脱离文档流	是否占位	是否影响周围元素在文档流中的位置
relative	否	是	否
absolute	是	否	否
float	是	否	是

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

第2个问题，，元素不知道宽高，如何实现水平垂直居中?
我特么居然被带沟里了，居然想了好久，还没回答出来，真是蠢到家了，前端入门的知识 啊，唉！！

本篇文章只是自己总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣
附上链接：https://developer.mozilla.org/zh-CN/

例子多来源于网上，已经过实践验证
1、元素水平居中

当然最好使的是：

margin: 0 auto;

居中不好使的原因：
1、元素没有设置宽度，没有宽度怎么居中嘛！
2、设置了宽度依然不好使，你设置的是行内元素吧，行内元素和块元素的区别以及如何将行内元素转换为块元素下篇总结。
示例 1：

<div class="box">
    <div class="content">
        哇！居中了
    </div>
</div>

<style type="text/css">
.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    line-height: 100px;//文字在块内垂直居中
    text-align: center;//文字居中
    margin: 0 auto;
}
</style>

2、元素水平垂直居中

方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
示例 2：

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

方案2：position transform 元素未知宽度（ 这个重点啊，今天面试被问了，居然忘记了，哑口无言，真的蠢到爆炸）
如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
效果如上！
示例 3：

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

方案3：flex布局
示例 4：

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方案4：table-cell布局（面试官给我提示了这个方法，我特么居然问这个是干嘛的，以前真的用过表格布局啊，也是忘记了，搞到我两都很尴尬，然后相视尴尬一笑)
因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用
示例 5：

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

牛客上的总结