css垂直居中问题

Question

父级元素宽度固定，高度不固定。
子元素宽高固定。
我的做法是
父级元素css

      width:100px;
      position: relative;

子级元素

      position: absolute;
      width: 10px;
      height: 10px;
      top:50%;
      border-radius: 50%;
      display: inline-block;
      left: 50%;
      -webkit-transform: translateY(-50%，-50%);

这段代码再大部分手机浏览器正常显示，但在安卓系统4.1.1的华为机子里，top值不起作用，一直在上面不下来，我把父级元素的高度固定了后，显示就正常了，然而父级高度不能确定。
这要怎么解决？

Answer 1

直接贴上个人笔记，看看能不能帮到你：
https://github.com/yuanzm/Front-End-Skill-Collection/blob/master/CSS/%E7%BA%AFCSS%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E4%BA%8EDIV.md

Answer 2

flex布局走起不是吗

 //在父容器
 display: flex;
 align-items: center;
 justify-content: center;

完美
http://caniuse.com/#search=flex

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Answer 3

http://zhuxinyong.com/2015/03/02/%E6%B0%B8%E6%81%92%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

总有一款适合你

Answer 4

子元素的定位为absolute，那它就脱离了文档流;
这个时候父级元素没有设定高度，最终父级的高度为0
而子元素又相对父级定位，top为50%;
所以 0的50% 还是0
解决：
给个最小高度给父级元素

Answer 5

父级 加 height:100% 没