@TedJenkler
Posted
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