css中使文字在盒子中垂直居中的两种方式

第一种方式

        利用行高上下两侧距离相等的原理实现文本垂直居中。

        具体代码为使line-height与盒子的height像素相等就可以实现，但需要注意的是，因为displa=inline-block的影响，可能经常会出现把行高写成inline-height，从而导致处置居中实现不了，所以如果显是的效果不同，建议先检查一下哈高的代码写没写错，反正我是经常写错，接下来是实现的原理，如果不想了解的，可以直接跳过去看的第二种方式。

        实现原理：行高指的是文字的高度，如果是一个行元素，行高就是文字的高度，但是在一个盒子或块元素中，因为设置的高度一般会比文字的高度高，所以如果不写行高，它就会紧贴在盒子的左上角，很不美观。而当我们设置了行高，文字所占的大小就会改变，除去文字本身的高度，还会出现上下空高，且两者一定相等，当行高与盒子本身的高度height相等，就会出现上下空白间隔加上文字本身高度等于盒子高度，既然上下间隔相等，行高又与height相等，那么呈现的效果不就是文字的垂直居中了吗。

第二种方式

            第二种方式就是利用        网页的布局，display=flex，是文字变成盒子的项目，此时再加上justify-content=center，就可以实现文字的垂直居中了。

            两种方式都很简单，都可以使用，第一种加上text-align=center，第二种方式加上aligin-items=center，就可以实现文字的居中了。

             如有错误，尽情指出，若还有其他方式，也欢迎补充。