css居中

假设我们有这么一段代码，再easy不过的结构：

demo.html

看起来是这样的：

preview in chrome

水平居中（方案从来不止一个）:

方案一：改动最小，借助div的块级元素特点，主要还是margin-left 和 margin-right 在设置为auto的时候，取值为0，互相牵制。

方案一

方案二：如果内部元素是行内元素怎么办呢？这就更简单了。

方案二

方案三：这两种方法都太常用了，如果我有元素要脱离愿来的dom渲染层怎么破？

方案三

方案四：你说的这些我都用过无数次了，太low了，来点有技术含量的ok？

方案四

方案五：你以为flex应该这么用吗？太天真。。。center才是真正的居中。

方案五

垂直居中（方案也不止一个）:

方案一：利用行内元素的特点，vertical-align + line-height  。

方案一

方案二：绝对定位。感觉绝对定位很灵活啦，但有一个缺点，它会脱离原来的dom层，使得父级元素塌陷。

方案二

方案三：flex布局，正解：

方案三

方案四：还是flex布局，歪解：虽然达到了同样的效果，但，我们改变了子元素层的对其方式，只单个元素可行。

方案四

居中垂直对齐（其实这个可以由上边的组合而来）

方案一：绝对定位

方案一

方案二：flex布局，正解：

方案二

方案三：flex布局，歪解：(如果单纯的为了解决居中而出现这种组合，那你真的很单纯。。）

不是方案的方案

方案四：针对行内元素：

方案四