- Semantic HTML5 markup - CSS custom properties - Flexbox

Community feedback

• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 3 months ago

  Hi @vic1500,

  Great work on your project! Here are a couple of tips for centering elements on your site:

  Flexbox Centering: One effective way to center your content is to set the body (or another container) to 100vh and 100vw, then use flexbox with align-items: center and justify-content: center. This will center your content both vertically and horizontally, and flexbox provides good responsiveness and customization options.

  Absolute Positioning: Alternatively, you can center a card or any content using absolute positioning. Set the parent container (usually body or HTML if not manipulated) to position: relative, then set the content to position: absolute with top: 50%, left: 50%, and transform: translate(-50%, -50%). This method centers the content without needing to define explicit width or height, but flexbox is generally preferred for its responsiveness and flexibility.

  Keep up the great work!

  Best, Teodor

  Marked as helpful

  1

  ---

  

  Arowosaye Victor Oluwadamilola•30

  @vic1500Posted 3 months ago

  Thank you so much for this @TedJenkler I'll apply this in my next projects

  1
• 

  Osmanys Fuentes-Lombá•40

  @wonddarkPosted 3 months ago

  It is no possible to center an item without set the parent's height before, by default the parent will take the height of its children, you cannot center an item vertically if its height is the same as its parent's

  Marked as helpful

  1

  ---

  

  Arowosaye Victor Oluwadamilola•30

  @vic1500Posted 3 months ago

  @wonddark Oh ok. Thank you

  0