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

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

<style type="text/css">
    *{margin: 0;padding: 0;}
    html,body{width: 100%;height: 100%;}
    .parent{
        /*父元素肯定是要有个宽高的对吧，可以是被其它元素撑开宽高，也可以自己随便设置宽高。本文示例设置为页面宽高 50%的大小。 */
        width: 50%;
        height: 50%;
        background: #ccc;
         /*给父元素相对定位relative*/
        position: relative;
    }
    .son{
    	/*子元素宽高随便设置,绝对保证你水平垂直居中*/
        width: 200px;
        height: 150px;
        background: #ab956c;
        /*子元素设置绝对定位absolute*/
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -75px;
    }
</style>

<div class="parent">
	我是父元素
	<div class="son">我是子元素</div>
</div>

效果如下图：

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

<style type="text/css">
    *{margin: 0;padding: 0;}
    html,body{width: 100%;height: 100%;}
    .parent{
        width: 50%;
        height: 50%;
        background: #ccc;
        position: relative;
        /*给父元素相对定位relative*/
    }
    .son{
    	/*子元素宽高随便设置,绝对保证你水平垂直居中*/
        width: 200px;
        height: 150px;
        background: #ab956c;
        /*子元素设置绝对定位absolute*/
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

<div class="parent">
	我是父元素
	<div class="son">我是子元素</div>
</div>

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

<style type="text/css">
    *{margin: 0;padding: 0;}
    html,body{width: 100%;height: 100%;}
    .parent{
        width: 50%;
        height: 50%;
        background: #ccc;
        /*display: flex;定义父元素为 flex 布局*/
		display: flex;
		/*justify-content属性定义了其下面的子元素在主轴上（X轴）的分布方式。*/
		justify-content: center;
		/*align-items属性定义其下面的子元素在交叉轴（Y轴上）上如何分布。*/
		align-items: center;
	}
	.son{
		/*子元素宽高随便设置,绝对保证你水平垂直居中*/
		width: 200px;
		height: 150px;
		background: #ab956c;
	}
</style>

<div class="parent">
	<div class="son"></div>
</div>

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

<style type="text/css">
    *{margin: 0;padding: 0;}
    html,body{width: 100%;height: 100%;}
    .parent{
        width: 50%;
        height: 50%;
        background: #ccc;
        position: relative;
	}
	.son{
		/*子元素宽高随便设置,绝对保证你水平垂直居中*/
		width: 200px;
		height: 150px;
        background: #ab956c;
        position: absolute;
        /*将left、right、top、bottom 四个位置的值设为0，再将外边距设置为margin: auto; */
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
	}
</style>

<div class="parent">
	<div class="son"></div>
</div>

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