写特么css的时候，有些文本套文本需要居中，这时鄙人我抓耳挠腮；什么padding、margin可劲的倒腾可是他娘的就是整不出来；可谓是特么的英雄气短，鄙人也算是给自己做个总结，总结几种常用的CSS垂直居中的粗略方法(css这玩意对于脑瓜子不太灵光的我来说就得靠死记硬背，包括后面的J鸡巴S，那玩意给老子学的真的怀疑自己的智商，骑兵连 进攻！！！)
方法一：利用<table>实现垂直居中：
Paste_Image.png
方法二：利用伪类元素或前后添加元素实现垂直居中：
Paste_Image.png
利用display：inline-block 和vertical: middle;间接的使文本垂直居中。
方法三：利用绝对定位实现垂直居中：
Paste_Image.png
利用绝对定位父子元素都得定宽高，因为牵扯到绝对定位后 设置margin-top和margin-left.
方法四：利用transform: translate偏移属性实现垂直居中（不兼容IE)：
Paste_Image.png
方法五：利用margin: auto;自适应实现垂直居中：
Paste_Image.png
方法六：利用flex实现垂直居中（推荐大势所趋）：
Paste_Image.png
方法七： 利用行号line-height、padding实现垂直居中（父元素高度自适应）
Paste_Image.png
网友评论