标签：
首先要有一个概念，凡是table布局可以实现的，CSS一定可以实现。
水平居中
水平居中有两种方法，1 text-algin:center; 2. margin-left:auto;margin-right:auto;
一般使用 2 方法，虽然简写成 margin:0 auto; 也可以实现，但是这种简写法，如果后面调整了margin-top/margin-bottom 值，就会失去水平居中效果。
另外，如果你的div没有指定宽度，那么这种css居中也起不到效果，解决办法是指定宽度或者 width：auto；
同时，页面必须设置document type为xhtml。（松散还是严格无要求）
如果在ie和firefox中效果不一样，最好 方法1 和 方法2 结合使用。
2016/03/14 09:22
这种居中方式对div有效。
教程中说对img和其他盒装标签有效，然而对img采用margin方式，实验无效，采用父元素设置text-align：center方式，有效；其他盒状标签都指什么，未知。
sum：大多数的居中都可以通过text-align:center ， margin-left/right : auto + 定宽，来解决。
单行垂直居中
方法： 单行内容的居中，无论是否给容器固定高度，只要给容器设置line-height 和 height ，并且设置两个高度相等。
优势：同时支持块级和内联元素，支持所有浏览器
缺点：只能显示一行，ie中不支持img等的居中。
注意点：使用相对高度定义你的height和line-height；不想毁了你的布局的话，overflow：hidden一定要。
个人chrome验证：
sum结论：要设置 height:xem; line-heght:xem; overflow：hidden； 如是内外嵌套，那么内部元素设置 margin-top:0px;margin-bottom:0px;
1. 对h2、p等块级元素、span等内联元素有效，textarea有不严格居中效果（本次实验，接近中上部）；对内部的div采用该方式无效。
2. chrome下验证，对img未能实现居中，可考虑使用其他方法。
3. overflow：hidden不设置的话，当任意改变字体大小时，对布局有很大影响。如下图所示：
4. 当设置固定高度、行高为30px，字体50px时，效果如下：
对应的，设置固定高度、行高为2em，字体50px时，效果如下（行高的体现值为100px，即字体大小的2倍。）：
5. 保险来讲，需要设置元素的margin-top/bottom为 0 ，否则有些规则下，会导致h2等元素有一定的上下外边距，导致未能严格居中；并且对整体布局也有一些影响。
容器高度可变情况下多行居中
方法：为容器设置一致的padding-bottom和padding-top就行。
优点：同时支持块级和内联元素；支持非文本内容；支持所有浏览器。
缺点：容器不能固定高度。（网络归纳文章中给出）
个人验证：
1. 该方法的核心思路是，在容器默认紧紧包围内容的前提下，为容器设置上下一致的内边距，会让内容在效果上距离上下边距等距，从而效果居中。
2. 容器不能固定高度的原因是，如果容器有高度，那么内容很可能不紧贴内边距的边线，造成视觉效果不一定居中。
3. 不能固定高度的说法并不完全准确，如果能确定容器高度和内容高度，只需要设置内边距底或顶 的值为 容器高-内容高 / 2 即可。
4. 该方法对图片有效。
2016/03/14 15:53
问题：
使用该方法 对 div>img 设置垂直居中，正常情况下没问题。然而如果对div多设置了font-size：50px，会导致图片下方有一小条空白，造成的原理未知；再遇到类似问题，可清理其css样式，去掉无关属性。
把容器当做表格单元
方法：为div设置display ： table-cell，然后再设置vertical-align：middle；
优缺点：在chrome、firefox及IE8 以上的浏览器下可以设置块级元素的 display：table-cell，vertical-align:middle; 但是要注意IE6/7并不支持这个样式。
阅读
该文章针对IE8+
# 方法1 使用绝对定位垂直居中。（核心原理是过度受限）
优点是支持响应式，只有这种方法在resize后仍然垂直居中。
需要注意使用过度受限的方式，上下左右的值都要为0，然后marign：auto，这样水平、垂直都居中。(不能省略距离左右为0)
# 方法2 负margin top方式
先用top来设置内部区域距离顶端为50%，然后上边距负数内部区域的高度值一半，从而视觉居中。
优点是代码量少，浏览器兼容性高，支持ie6/7
缺点是不支持响应式（不能使用百分比，min/max-width）
# 方法3 借助额外的元素
用一个空的div来撑起内部区域和顶端的距离。该距离通过合理的计算得到。
支持IE5/6.
# 方法4 table-cell
为容器设置display：table-cell，vertical-align: middle; 该方法对最新版本的浏览器几乎都适用，支持任意内容的可变高度，支持响应式。 然而不支持IE5/6版本。
# 方法5 inline-block
该方式明确需要包含框（用于生成after，一般来讲，应该设置高度参数），其原理是 为同一行的inline-block元素设置vertical-align:middle，该行内的元素会按照元素的垂直中心线对齐 （注意这两个参数是对实际要居中的内容设置的，而非外围容器。有别于其他诸如table-cell的方法） 。
版本兼容，不支持IE5/6.
# 方法6 inline-height
设置包围框的height和lineheight属性同一个值。原理是如果Line-height高度大于font-size，那么生成的高度会被浏览器平均分配到上下两端。
优缺点，适用于单行文本；简单明了。
综合来看
A 如果外层容器没有display的限制，可以优选table-cell的解决方案，代码量小，支持响应式，但是不能做到兼容IE5/6/7；
B 如需要内层内容高度自适应（无法最初就固定），那么可以选择方案1，比如设计div弹窗（宽度固定，高度根据内容自填充）的时候；优点是支持响应式，在resize后仍然垂直居中。
C 方法2/3适用于IE5/6/7的居中，如果考虑全兼容性，可能需要使用方法2/3才行；如果可以忽略IE的旧版本，可以优选方法4/5.
而方法2/3的原理都是固定高度前提下，通过边距或者填充区域，来造成视觉效果居中。适用于一些特殊情况。
关于水平居中和垂直居中的阅读记录
标签：
原文地址：http://www.cnblogs.com/ylblog/p/5493289.html
