profile card component using html, css and bootstrap

Community feedback

• 

  Tristan Sean Paul Perfecto Cinco•45

  @kolehiyoloPosted almost 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

  0

  ---

  

  Shubhangini Sharma•130

  @shubhanginisharma627Posted almost 4 years ago

  Thanks, I will try it

  0
• 

  Steven Toben•750

  @steventobenPosted almost 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.

  0

  ---

  

  Shubhangini Sharma•130

  @shubhanginisharma627Posted almost 4 years ago

  thanks for the advice

  0
• 

  Nemanja•60

  @FriendlyCodeArtPosted almost 4 years ago

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

  0

  ---

  

  Shubhangini Sharma•130

  @shubhanginisharma627Posted almost 4 years ago

  Thanks, I will try it

  0
• 

  Tereza•605

  @sirriahPosted almost 4 years ago

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

  0
• 

  Michal Rogozinski•50

  @rogozinskiPosted almost 4 years ago

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

  0

  ---

  

  Shubhangini Sharma•130

  @shubhanginisharma627Posted almost 4 years ago

  I have tried it didn't work.but thanks for the advice

  0