<div style="width:600px;heigth:600px"><!--这个是父元素-->
<div class="son"><!--这个是子元素-->
<h1 class="title">hello word</h1>
<div class="content">这里面是一堆元素</div>
</div>
</div>
知道父元素的宽度和height，直接通过css写的width和height， 子元素没有通过style设置width和height，而是通过子元素中内部的元素将其撑开来计算的。
如何让这个子元素居中？
测试过的失败的方法
margin-top:50%; margin-top:-50%; margin-top的百分数是根据父元素的width计算的。
父元素 position:relative; 子元素position:absolute;top:0;right:0;bottom:0;left:0 失败，子元素如果不设置width和height就会直接继承到父元素的width和height，而不是通过内容撑开的宽度和高度。
父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:absolute;top:-50%;top百分比里是根据父元素设定，子元素absolute，父元素继承不到高度。
父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:relative;top:-50%;
这个最接近正确的答案，但是还是是错误的，在chrome的盒子模型里面已经显示出了relative的偏移量，但是渲染的时候并没有被渲染出来，top-50%；无效果。
最后一个方法我没试，但应该没问题，不过这样做的话容易出错，我这个网页上铁定是有视频的。
因为子元素是被撑开的，所以在子元素的里面再加一层div，然后设置overflow:hidden; bfc。然后通过js获取到这个div的高度，给子元素设置偏移量。
但这样可能会出问题，window.onload 的前提是网页上内容加载完毕，但是如果在有视频的情况下则会等到视频被加载完毕才会触发window.onload，因此不能用window.onload来实现，最多就是把js放到body标签结束地方的前面，但是可能会出现访问的时候类似于图片渲染（或者加载）速度慢的情况下，会导致获取到的js的值不正确。
我想的是最好能使用纯css来实现这个子元素的垂直居中 大神 快出来啊
业余奶茶品鉴师
慕用4288045
qq_奈奈奈_03699702
年轻大叔