⾏内元素的垂直居中⽅法
css设置文字垂直居中
⽅法1： 设置块元素的 height,line-height为相同的值：
作⽤于单⾏⽂字，使⽂字垂直居中显⽰；
实现原理： line-height 与 font-size 的计算值之差（在 CSS 中成为“⾏间距”）分为两半，分别加到⼀个⽂本⾏内容的顶部和底部。（可以包含这些内容的最⼩框就是⾏框。）实现了单⾏⽂字居中；
⽅法2：vertical-align
适⽤于在块元素⾥存在⼤于⼀个⾏内元素需要垂直居中时（如图⽚和⽂字需要垂直居中显⽰时），可以通过对图⽚的标签或⽂字的标签（⾏内元素）设置vertical-align，可以达到效果；
vertical-align属性的定义：该属性定义⾏内元素的基线相对于该元素所在⾏的基线的垂直对齐。允许指定负长度值和百分⽐值。这会使元素降低⽽不是升⾼。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐⽅式。
如：
<span></span>
<img src="***">
</div>
span {vertical-align: middle;} 表⽰图⽚的基线相对于span⽂字的垂直⽅向上的中部对齐；
⽅法3：设置display: table-cell;vertical-align: middle；达到垂直居中；
适⽤于在块元素内存在⾏内元素，块元素的混合元素时，且需要将它们垂直居中；
注：此⽅法存在兼容性问题；ie7和ie6都不能识别 display: table-cell;（但是⽀持display: block等css1的属性！）
ie8以及以后版本可以识别；使⽤display:inline-block属性代替display:table-cell就完全ok的啦！
⽅法4： 绝对定位+负外边距；
使某个⾏内元素垂直居中，可以先绝对定位，设置top:50%,margin-top:-2/height;(假设元素在顶部；)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。