Method 1: Using margin and max-width

Example: A blog post

In this example, I have added a border to the blog post elements to better visualize how this centering technique works.

The blue solid border is the edge of the section container. The blue dotted border is the edge of the div element

This blog post is centered with margin and max-width

2023-08-04

Blog Post Title

Blog post subtitle

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nemo quia dolor, harum accusantium rem! Ratione natus fuga laudantium, dolores hic incidunt adipisci maxime et dicta omnis ipsum perferendis voluptates.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

This blog post is centered with margin and max-width

2023-08-04

Blog Post Title

Blog post subtitle

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nemo quia dolor, harum accusantium rem! Ratione natus fuga laudantium, dolores hic incidunt adipisci maxime et dicta omnis ipsum perferendis voluptates.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

This blog post is NOT centered with margin and max-width

2023-08-04

Blog Post Title

Blog post subtitle

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nemo quia dolor, harum accusantium rem! Ratione natus fuga laudantium, dolores hic incidunt adipisci maxime et dicta omnis ipsum perferendis voluptates.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

This blog post is NOT centered with margin and max-width

2023-08-04

Blog Post Title

Blog post subtitle

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos nemo quia dolor, harum accusantium rem! Ratione natus fuga laudantium, dolores hic incidunt adipisci maxime et dicta omnis ipsum perferendis voluptates.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deserunt fugit sunt nostrum commodi ducimus similique nihil rem, quasi corrupti odit iste soluta corporis sint! Provident ipsam ab inventore recusandae.