Span标签文本内容垂直居中的操作方法

如下图所示，Span标签中插入了一个简单的文本内容，但是该文本内没有垂直居中显示。

span元素是内联元素(行内元素), 不可以进行块状元素的操作。

span标签居中显示的正确方法

CSS操作方法：
首先给Span加上块状属性display:block，然后设置宽、高，否则不能居中显示

<span style=”text-align: center”>水平居中</span>
<span style=”line-height：值为span的高度”>垂直居中</span>

将line-height设置与Height一样高，就能实现垂直居中。

利用flex布局，实现span内容垂直居中

display:flex;
justify-content:center; //水平居中
align-items:center; //垂直居中