css 左边元素和右边元素一样高，垂直居中如何实现呢？

Question

css 左边元素和右边元素一样高，垂直居中如何实现呢？
效果图

这个危害因素的高度要和 后面文字的元素一样高
就想这样

文字是后台传递的，所以文字多少是不可控的
现在我的样式是

    .ul_one{
            width: 100%;
            color: #797979;
            li{
                background: #FFFFFF;
                .div_one{//就是现在看到的每一行
                    line-height: 2.9rem;
                    height: 100%;
                    border-bottom:1px solid #f4f4f4;
                    overflow:hidden;
                    span{
                        display: inline-block;
                        float: left;
                    }
                    span:nth-child(1){//现在看到左边的名字
                        display: block;
                        height: 100%;
                        width: 30%;
                        background: #A6E5DA;
                        text-align: center;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    span:nth-child(2){//现在看到右边的名字
                            width: 60%;
                            padding-left: .9rem;
                            text-align: justify;
                            float: left;
                            height: auto;
                            word-break: break-all;
                    }
                }
            
            
            }
            
            
        }

我在网上搜索给 span:nth-child(1){}加了

                   `   padding-bottom: 9999px;
                    margin-bottom: -9999px;
                    vertical-align: middle;`
可以实现为

但是怎么垂直居中呢？

Answer 1

这个可以归类为多列等高问题。在你这里其实要实现两列等高，并不一定是高度的完全一致，只是左右两列颜色所占空间高度看上去一致。
你上面给出的解法算是一种，还有其他一些巧妙的解法，可以戳这个DEMO看看：

6种实现多列等高的方法

---

另外，更多有趣的 CSS 问题解法可以戳这里看看：https://github.com/chokcoco/C...

Answer 2

用table来做不是很简单吗？

Answer 3

你用display:flex去做等高布局吧，要不居中不好设置。

// 父元素设置
  display: flex;
  align-items: center;

缺点：需支持css3。

Answer 4

这是一个很标准的表格啊

直接用table就可以实现了，兼容性又好

Answer 5

可以用flex布局，用autoprefixer对低端机兼容，这是在线地址

Answer 6

在你需要的地方加上
display:table-cell;
vertical-align: middle;