文字和其他元素一起出现的时候，经常碰到需要对齐的情况，通常我们会选择垂直方向进行文字的居中
关于垂直居中文字的方法，我最常用的是，把line-height属性设置成容器的高度。这个方法虽然简单，但是还是要两行代码。而且必须先指定行高才能使用。
除了这个方法以外还有两种方法是兼容性比较高的，可以在ie8上使用。
- 使用vertical-align属性进行居中
- 使用内边距padding属性让文字垂直居中。
vertical-align属性算是比较方便的对齐方法了，所有浏览器都支持这个属性，但是ie浏览器不支持属性继承。但是之前都没有仔细研究过到底怎么使用。
这次的场景是element ui的栅格布局，用el-row 和el-col来进行布局，同一个el-row里面，不同的el-col里面有文字，也有输入框，选择框之类的，结果出现了选择框和文字没有对齐的问题。
我是把文字放在p元素里面，然后对p元素使用vertical-align属性，结果没有效果。
因为vertical-align属性是用来设置行内元素的基线的对齐方式的，而p标签是块级元素，所以没有效果。
所以说，文字还是用行内元素的span来包裹比较好
基线具体指哪里我就不深究了，反正一个个试过去总能找到合适的，多试试就知道了。
可能的值
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
添加下面一行代码后，就可以正常对齐了。
span{
vertical-align: middle;
}
除了上面提到的3中兼容性高的方法，还有以下两种方法：
1.使用css3 transform
.center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}
2.flex 布局,
// 给文字的父盒子加上
display: flex;
justify-content: center;
align-items: center;
// 文字
flex:1;
