前端 position: absolute布局 text-align: center失效解决办法

前言

项目ui要求图片上备注文字效果

想实现这种效果可以使用 position: absolute布局
但是使用 position: absolute text-align：center失效的问题
错位效果

如何解决？

解决方法

方法1

可以调整padding的方位来实现居中效果
先看效果图 ui的文字偏向那个方向
如果是偏上 左右没问题
那么我们就把height调小一些 比如ui给的尺寸是50px 我们可以写高度为40px
然后利用padding-top:10px 来实现文字的居中问题
反之左右有偏差
我们就调整width的尺寸 用padding-left或者right来动态调整

方法2

还有一种是全屏居中

position:absolute;
top:50px;
left:50%;
transform:(-50%,-50%);

这种效果适用于 全屏居中 比如：空页面的提示图片,网络断开提示 等等