css实现元素水平垂直居中

1.绝对定位，利用负边距

利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的position设为absolute，绝对定位；以及设置left和top为50%；再加上负边距，margin-left值为width的一半，一样的，margin-top值为height的一半。

咱们来理解一下，绝对定位的子元素，经过自身的边界来相对于父元素进行定位，这个边界就是margin，当咱们设置了left和top各为50%时，子元素左边界距父元素左边界50%,上边界距父元素上边界50%，其实此时，咱们能够知道，子元素的左上角这个点，是水平垂直居中的，当咱们设了负边距时，咱们能够理解为这个子元素向右向上各移了自身长度的一半，这就达到了水平垂直居中。固然咱们也能够这么理解，其实真正相对于父元素来定位的点就是子元素左上角的点，当咱们设了负边距，子元素的中心点就取代了它左上角的点，若但愿子元素能水平垂直居中，这时只需再设left和top各为50%时即可。
代码以下：

2.绝对定位，margin:auto

使用绝对定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto

当咱们为子元素设置left:0;right:0;top:0;bottom:0;时，浏览器将给子元素从新分配一个边界框，此时子元素将填充其父元素的全部可用空间，当咱们给子元素设置一个width或height，防止子元素占据全部的可用空间，浏览器将根据新的边界框从新计算，再加上margin:auto,因为被绝对定位，脱离了正常的文档流，浏览器会给margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素块在父元素中水平垂直居中。
代码以下:

3.Flex

Flex布局即为弹性布局，只需将父元素设置三个属性便可(display,justify-content,align-items)
代码以下：

4.Transform

CSS3中新增的transform属性, 代码以下：

5.Table

模拟表格效果:

总结

1.利用负边距方法优势是具备良好的跨浏览器特性，兼容IE6/IE7，可是缺点是不能自适应，需设置子元素的宽高，不支持百分比，且负边距值与padding和是否认义box-sizing: border-box有关，计算须要根据不一样状况。

2.利用margin:auto方法支持跨浏览器，支持百分比，可是必须声明子元素的width或height(至少一项，否则会占据父元素全部空间)。

这两种绝对定位方法，可在子元素中，设置overflow:auto来防止内容越界溢出。

3.利用flex或transform方法的好处是代码量少，且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开，优雅地溢出。但flex IE8/IE9不支持，transform IE8不支持，且属性须要写浏览器厂商前缀。

4.table方法的好处是没有空间的限制，能够根据元素内容动态的改变高度，素的内容不会由于没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下没法正常运行，结构也更复杂。

5.html结构以下:

6.实验结果以下：(实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不一样)
绝对定位的溢出(overflow:auto)：

flex或transform或table的溢出：