css元素垂直居中vertical-align：middle；
前⾔
⼀直以来关于元素居中都是困扰着前端的问题，为了元素的垂直居中，头发都熬没了，⼩谭今天为⼤家介绍⼏种可以实现元素垂直居中的⽅法，以及每个⽅法的优缺点。
准备
⼀个名为box的div，设置宽⾼200px，box⾥嵌套⼀个图⽚，图⽚宽⾼为100px，如图：
我们需要实现图⽚在box的居中，如图：
实现⽔平居中很简单，给box添加属性text-align：center；即可，实现垂直居中的⽅法有：
1.⾏⾼以及vertical属性
给box添加⾏⾼并设为200px（与box等⾼），再在box添加属性vertical-align：middle；即可实现图⽚的垂直居中。⾏内块元素会有上下间距的bug，将font-size设为0即可
缺点：如果需要在box⾥添加⽂字，可以将图⽚或⽂字再嵌套⼀个盒⼦单独设置字体⼤⼩和⾏⾼就⾏。
2.使⽤定位
给box加relative定位，图⽚加absolute定位，图⽚上下左右为0，margin设为auto，即可实现；
或者left：50%；，top:50%;，再添加transform：translate（-50%，-50%）可以实现，因为transform为css3新增属性，所以这种⽅法会有兼容问题；
也可以把transform改为margin，设置负⾼度的⼀半和负宽度的⼀半，这种⽅法虽然没有兼容问题，但是需要知道图⽚的准确宽⾼。
3.利⽤表格属性
css设置文字垂直居中
给图⽚再嵌套⼀个盒⼦b（b可以为任意双标签），把box转化为表格元素（display：table），把嵌套在图⽚外⾯的盒⼦b转化为单元格元素（display：table-cell），即转换为表格⾥的td，再添加vertical-align：middle即可实现，这种⽅法可以接受⽗元素和⼦元素都是未知宽⾼。
4.利⽤vertical-align
再在box⾥添加⼀个图⽚，⾼度设为100%，宽度为0，再给两张图⽚添加属性vertical-align：middle即可实现垂直居中，这种⽅法可以不⽤设置⾏⾼。
注意
如果图⽚尺⼨不⼀样，可以给图⽚设置最⼤宽度（max-width）和最⼤⾼度（max-height）就可以实现不同尺⼨图⽚的⽔平垂直居中
结束语
好啦，今天就是⼩谭要分享的内容，如果有什么写的不对地⽅，或者有⼤佬有更好的⽅法实现，欢迎来和⼩谭进⾏技术分享哟，⼩谭不胜荣幸，啾咪~~

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