设置子元素在一个不清楚宽高的父元素中垂直居中

通过以下几种方法，便可以实现子元素在一个不清楚宽高的父元素中水平垂直居中的效果。具体使用哪种请根据自己的需要。（推荐使用方法2-4）
方法 1. 使用定位和负边距margin可以实现
（缺陷 ：这种方法可以不用知道父元素的宽高，但是必需得知道子元素的宽高才可以设置）
做法：给父元素设置relative相对定位，给子元素设置absolute绝对定位，子元素偏移值left、top为50% 以及 负的margin值,子元素负的margin数值设置为这个子元素宽高的一半。

	我是父元素
	
我是子元素

效果如下图：

方法 2. 使用定位和 css3 的 transfrom 属性实现水平垂直。
（注意：跟方法1有些类似，但是针对方法1的缺陷做了修改）
做法：给子元素设置偏移值left、top为50%以后，再使用 transform 属性对子元素进行移动，其值translate(-50%,-50%)表示根据元素自身的大小，向x和y轴方向偏移-50%的距离。

	我是父元素
	
我是子元素

效果同上面的图，就不贴图了，效果可以自己复制代码尝试。
方法 3. 使用弹性盒子flexbox进行布局。
做法：只需要给父元素设置三条属性值 display: flex; justify-content: center; align-items: center; 即可，不需要考虑父元素和子元素的宽高问题。

方法 4. 使用定位和外边距 auto 进行布局。
做法：父元素设置 relative 相对定位，子元素 absolute 绝对定位。
同时给子元素设置在父元素中的四个位置值为0，再添加边距值为 margin: auto; 即可！
代码如下，欢迎尝试：

以上就是实现子元素在一个不清楚宽高的父元素中水平垂直居中排列的方法。