Front-end position: absolute layout text-align: center failure solution

foreword

The project ui requires the text effect on the picture to be remarked

If you want to achieve this effect, you can use position: absolutethe layout
, but position: absolute text-align：centerthe problem of using invalidation
is the dislocation effect

How to solve?

Solution

method 1

paddingThe orientation can be adjusted to achieve the centering
effect. First, look at the direction in which the text of the rendering ui is biased.
If it is no problem if it is upward, left, or right,
then we heightcan make it smaller. For example, the size given by the ui is 50px. We can write a height of 40px
and use it padding-top:10pxto realize the text The problem of centering,
on the contrary, there is a deviation between the left and the right,
so we widthuse the adjusted sizepadding-left或者right来动态调整

Method 2

There is also a full screen centered

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

This effect is suitable for 全屏居中example : prompt pictures of empty pages, network disconnection prompts, etc.