多个div如何垂直居中

[一点点前进的小郑]

<ul>
    <li>
        <div>明星</div>
        <div >股票</div>
        <div >持股时长</div>
        <div>累计涨幅</div>
    </li>

<li>
        <div>明星</div>
        <div >股票</div>
        <div >持股时长</div>
        <div>累计涨幅</div>
    </li>

<li>
        <div>明星</div>
        <div >股票</div>
        <div >持股时长</div>
        <div>累计涨幅</div>
    </li>
</ul>

如何把上述代码中，每一个li里的div在一排显示，最重要的是水平并且垂直居中！！
已经设置为float：left了，而且条件是，父节点li设置的width是按照百分比设置的，所以大家不要通过固定高宽来设置居中对齐。。

[hongmei85]

设为float：left的是什么标签？

[zpjshiwo77]

两种方法： top：50%； left：50%；-webkit-transform: translate(-50%, -50%); 第二种： http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

[一点点前进的小郑]

引用 1 楼 hongmei85 的回复:

设为float：left的是什么标签？

每个div啊，position: relative;然后float：left，让他们并排了，就是居中不知道怎么搞

[一点点前进的小郑]

引用 3 楼 zpjshiwo77 的回复:

两种方法： top：50%； left：50%；-webkit-transform: translate(-50%, -50%); 第二种： http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

是在div里设置吗？我试试

[zpjshiwo77]

引用 4 楼 zzxzzxhao 的回复:

你要先看看为什么这么用，怎么用，然后在用，别直接粘贴代码~

[一点点前进的小郑]

引用 5 楼 zpjshiwo77 的回复:

[quote=引用 4 楼 zzxzzxhao 的回复:]

你要先看看为什么这么用，怎么用，然后在用，别直接粘贴代码~[/quote]
我把我做的截图给你看，就是每个div都有东西在里面，但是没办法实现水平对齐，我刚试了下，用vertical-align: middle这个，但是没有任何改变

[一点点前进的小郑]

我在多个div前面加了个div，加上css如下

display:-webkit-flex;
display: flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content: center;
justify-content: center;

是的，我用来flexbox布局解决了一切！