How to center anything with css

1. 绝对居中定位技术

　　我经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS

　　

　　优点: 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　缺点:

　　1.支持跨浏览器，包括IE8-IE10.　　　　　　　　　　　　　　　　　　　　　　　　　　　　1.必须声明高度（查看可变高度Variable Height）。

　　2.无需其他特殊标记，CSS代码量少　　　　　　　　　　　　　　　　　　　　　　　　　　  2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）

　　3.支持百分比%属性值和min-/max-属性　　　　　　　　　　　　　　　　　　　　　　　　 3.在Windows Phone设备上不起作用。

　　4.只用这一个类可实现任何内容块居中　　　　　　　　　　　　　　　　　　　　　　　　　　

　　5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

　　6.内容块可以被重绘。

　　7.完美支持图片居中。

　　

2. 变形 transforms

　　　这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上top: 50%; left: 50%;

　　　　 <div class="center"></div>但是要记得加上浏览器的前缀。

3.行内块元素(inline-block)

　　很受欢迎的一种居中实现方式，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素来占位让内容块处于容器中央

　　

　　首先要了解垂直方向的对齐排版需使用 vertical-align ^#2，并且只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框） 的，简单的说，inline level元素按照 Normal flow 水平排版出一行就会        形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。

* 换句话说，我们的垂直居中是要在每个line box中进行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非该行文本的line box，所以就算定义vertical-laign为middle也无法让该行文本在demo容器  中      垂直居中。我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo一致，文本将会在line box内垂直居中，即同样实现了在demo容      器中垂直居中。本例我们使用伪对象::after来创建那个新增元素，可以设置新增元素为不可见。

* 当然，该方案也是有局限性的，因为IE8以下的浏览器不支持伪对象::after

　但是 IE8 无法支持伪元素 所有我们span来代替为元素进行占位。

4 . img 的垂直居中

　　htm 结构　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　CSS

　　　　　　　　　　　　　　　　　　　　 　　　　　　

　　外层的容器 设置文本水平居中  然后 对img自身也设置水平居中。然后通过添加一个空标签span 设置其为inline-block  vertical-middle: middle;

5. flex

　　

6. display:-webkit-box

　　  

7. table-cell