If I have a flexbox, I can center it horizontally and vertically, using

justify-content: center;
align-items: center;

and I can use the following code in the case of position: absolute

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

What is the difference between the both and what is the more preferred way?

CodePudding user response：

The

Because the flexbox way is usually what you want, I would say it is the preferred way. However, sometimes you want the behavior of absolute positioning, in which cases it is absolutely (heh) okay to use position: absolute.