1.问题引入：
为什么样式对文本位置没有起任何作用？加上display: table-cell; 就可？
<label id="lb-file-choose">Choose images to upload (PNG, JPG)</label>
样式
#lb-file-choose{
600px;
height: 100px;
text-align:center;
background:#9d9dd3;
vertical-align:middle;
}
2.原因：
DOM 中的元素内元素和块级元素。样式中有的元素属性只能用于块级元素，有的用于行内元素。text-align 用于块级元素
行内元素（a,b,br,em,font,i,img,input,label,select,small,span,strike,strong）：
a.不占据整行，随内容而定：不可以设置宽高，也不可设置行高
b.内联元素可以设置外边界，但是对外边界的上下不起作用，只对左右起作用
也可以设置内边界，但是内边界ie6 也不对上下作用，只能对左右作用
扩展：
*1.行内元素是有盒子模型的，但是margin,padding对应的bottom,top是无效的对行内元素，但是left or right 是有效的
*2.vertical-align用于行内元素中的垂直居中，文字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
*3.在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。
没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中
块级元素（div,dl,dt,dd,form,h1,hr,p,ul,ol):
a.新行总是占据一整行
b.高度，行高以及外边距和内边距都可控制
c.宽度始终与浏览器宽度一样，与内容无关
d.它可以容纳内联元素和其他块元素
3.解决方案：
样式中加入display: table-cell;使用display 设置可以使得行内元素和块级元素之间相互转换。
link: https://www.cnblogs.com/huchong/p/7875127.html
https://www.cnblogs.com/clj2017/p/9293363.html