1.绝对定位，使用负边距使用负边距实现子元素居中（相对于父元素（position:relative）），需要知道子元素的宽高；并将子元素的位置设置为absolute，绝对定位；left和top设置为50%；加上负边距，margin-left值为宽度的一半，同理，margin-top值为高度的一半。让我们理解绝对定位的子元素是通过它自己的边框相对于父元素定位的。这个边界是边距。当我们将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;，浏览器将重新分配一个边界框给子元素。这时，子元素将填满其父元素的所有可用空间。当我们为子元素设置一个宽度或者高度时，防止子元素占用所有可用空间，浏览器会根据新的边界框重新计算，加上margin:auto，因为是绝对定位，不正常文档流，浏览器会赋予相同的margin-left,margin-right值，相同的margin-top,margin-bottom值使得元素块在父元素中水平和垂直居中。代码如下：3.FlexFlex布局是一种弹性布局，只需要在父元素上设置三个属性（display、justify-content、align-items）代码如下：4、新建transform属性中的TransformCSS3，代码如下：五、表格模拟表格效果：总结1、使用负边距方法的优点是跨浏览器特性好，兼容IE6/IE7，缺点是不能自适应，需要设置子元素的宽高，不支持百分比，负margin值与padding相关，是否定义box-sizing:border-box，计算需要要根据不同的情况。2、使用margin:auto方法支持跨浏览器和百分比支持，但是必须声明子元素的宽或者高（至少一项，否则会占满父元素的所有空间）。这两种绝对定位方式可以在子元素中设置overflow:auto来防止内容溢出。3.使用flex或者transform方式的好处是代码量小，不需要设置子元素的宽高。内容可以通过子元素中的子元素任意拉伸，优雅溢出。但是IE8/IE9不支持flex，IE8不支持transform，属性需要加上浏览器厂商前缀。4、表格方式的优点是没有空间限制，可以根据元素内容动态改变高度。元素的内容不会因为没有足够的空间而被截断或出现难看的滚动条。但在IE6-7下不能正常工作，结构比较复杂。5、html结构如下：6、实验结果如下：（实现了子元素的水平和垂直居中，可以通过不同的方式观察两张图片的溢出）绝对定位溢出（溢出：自动）：弹性或转换或表溢出：
