百分比宽高下使内容居中

一般情况下都是用line-height来配合使内容居中 但当高度使用百分比来定义的时候 line-height就捉襟见肘了 

line-height的百分比设置是根据字体来的 所以说和高度没有关系 

display: flex; justify-content: center; align-items: center; 三行代码即可解决这个问题 应用的范围也很广 不用配合text-align即可让内容居中