inline-block的元素垂直居中的问题

Question

左右两边的元素都是inline-block的，为啥右边的dom不能垂直居中？

右边元素的样式：

.pieText {
    width: 30%;
    height: 100%;
    display: inline-block;
  }

父元素的样式：

.chartWrap {
    background-color: white;
    float: left;
    width: 48%;
    height: 300px;
    margin: 1%;
    min-width: 380px;
  }

用了vertical-align:middle,不起作用,应该怎么办？

Answer 1

推荐两个垂直居中的方法
1.父元素relative 子元素absolute top:50%; margin-top:-子元素高度; 这种方法需要知道子元素的高度
2.父元素伪类

.box::after{
    content:"";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

子元素display:inline-block;vertical-align:center;
还有其他的translate这种兼容性不是很好
个人推荐第二种方法 特别是element-ui中的弹窗基本都是用的这种方法

Answer 2

vertical-align:middle是对display:table-cell的元素中的子元素起作用

Answer 3

.pieText 中的height去掉,再加上 vertical-align 应该就可以了

Answer 4

flex大法好。浮动元素不可用flex，但是，里面多套一层div就可以了

div{
  display:flex;
  justify-content:center;
  align-items:center;
}

vertical-align的方法没咋试过，就不说了

Answer 5

父元素display:flex;align-items:center;自动对齐

Answer 6

可以看一下我的这一篇博客,专门讲垂直居中的
https://blog.csdn.net/zrn1812...

Answer 7

父元素line-height应该设置为和高度一致，并设置子元素line-height为默认值。
vertical-align:middle并非垂直居中，而是让内联元素中线与X字母交叉点水平对齐。
如果父元素内只可以放下一行元素，那这个效果也就近似（确实是近似，会受到字体的影响略微误差几个像素）垂直居中。

所以问题解决就是

.chartWrap {
    line-height: 300px;
}
.pieText {
    line-height: normal;
    vertical-align:middle
}