css元素居中实现方法
关于css元素居中，查阅资料和实验有以下几种方法：
水平居中
1.最简单的在父元素中加入 text-align:center 。这条语句不用关心子元素是否有固定的尺寸大小。
但只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。
但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
2.子元素宽度确定，可以使用 margin:0 auto 或者 margin-left:auto ; margin-right:auto
此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
3.子元素宽度不确定，可以将子元素放在table中，将table设置为 margin:0 auto。
4.利用浮动居中，不需要知道该元素宽度
包裹子元素的盒子设置：position:relative;float:left;left:50% ( 此盒子不应设置尺寸)
子元素：position:relative;left:-50%
垂直居中
1.父元素高度不确定，在父元素中padding-top和padding-bottom实现上下居中。
注意：在子元素中使用margin-top和margin-bottom其实不能实现padding所实现的效果:
在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。
最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
相邻的盒模型中，如果其中的一个是浮动的，垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
另：如果在子元素中设置padding-top padding-bottom ，也可以在视觉上达到同样的效果，但实际上这个div并没有垂直居中。
2.如果是父层高度确定的单行文字，把文字的line-height设为文字父容器的高度
3.父层高度确定的多行文本、图片、块级元素垂直居中
css 中有个用于垂直居中的属性 vertical-align，但只有在父层为 td 或者 th 时，这个属性才会生效，对于其他块级元素，例如 div、p 等，默认情况是不支持的。
在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，但 ie6,7 并不支持，所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。
全方位居中
1.子元素尺寸已知。
父元素设置：position:relative
对子元素设置 position:absolute;top:50%;margin-top:-heigt/2 px;left:50%;margin-left:-width/2 px; （margin值不能用百分比大小）
注意：
这是个非响应式的方法，不能使用百分比的大小，也不能设置min-/max-的最大值最小值。
内容可能会超出容器
需要为padding预留空间，或者需要使用box-sizing: border-box样式。
也可以写成： position:absolute;top:0;bottom:0;left:0;rght:0;margin:auto;（若此时子元素没有尺寸，会填满整个父元素）
优点：
跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
无特殊标记，样式更精简
自适应布局，可以使用百分比和最大最小高宽等样式
居中时不考虑元素的padding值（也不需要使用box-sizing样式）
布局块可以自由调节大小
img的图像也可以使用
2.transform
子元素有尺寸，设置
{
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
同时注意：
- 不支持IE8
- 需要写厂商前缀
- 会和其他transform样式有冲突
- 某些情况下的边缘和字体渲染会有问题
3.table-cell
4.inline-block
5.css3的flexbox
子元素尺寸已知：
用margin负值；
用left：0；right：0；
transform法；
