WebsiteLesson 304Free preview
Center Website
This lesson is part of How To · All levels
Summary
Focusing on the content of a website means placing the main block in the center of the viewing area without making it fully widespread. The most common way is to give the maximum width and then use the left and right margins automatically. To center the elements vertically or center the contents of the card, flexboxes and grids offer a more controlled solution.
Key points
- Use max-width and margin: 0 auto to center the block of content
- Text-align: center only centers text and inline elements within it
- Flexbox with justify-content and align-items centering in two directions
- Avoid positioning: absolute as the main way to focus content
- Always test on a small screen so that the content does not exceed the viewport
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.