profile card component using html, css and bootstrap

Community feedback

• 

  Tristan Sean Paul Perfecto Cinco•45

  @kolehiyolo

  Posted over 4 years ago

  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

  01
• 

  Steven Toben•750

  @steventoben

  Posted over 4 years ago

  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.

  01
• 

  Nemanja•60

  @FriendlyCodeArt

  Posted over 4 years ago

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

  01
• 

  Tereza•605

  @sirriah

  Posted over 4 years ago

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

  00
• 

  Michal Rogozinski•50

  @rogozinski

  Posted over 4 years ago

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

  01