profile card component using html, css and bootstrap

the best suggestion I can give you is position:absolute. this is the one that is guaranteed to always keep your content in the center of the page.

.card{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

checkout this video for more info on the position attribute: https://www.youtube.com/watch?v=P6UgYq3J3Qs

How are you trying to center the card? Along the y axis? or x axis? or both? There's tons of ways if you just want to center the card to the middle of the screen just create a div that wraps everything in the body. Make sure the width is 100vw and the height it 100vh. Then set the display to flex. set justify-content to center to center is horizontally, set align-items to center to center it vertically. Flexbox is probably overkill for this tho it could most likely be done simpler if you clarified what exactly you want to achieve.

You can try this : body { display: flex; justify-content: center; align-items: center; height: 100vh; }

Hello, try to look at this article. https://moderncss.dev/complete-guide-to-centering-in-css/

have you tried to use "margin: 0 auto;" for "body" selector?