Horizontal Centering with margin: auto
Discover how to position a fixed-width box exactly in the center of its container using only CSS. This lesson guides you through applying the margin auto property to achieve horizontal centering without extra HTML or JavaScript, helping you build cleaner page layouts.
We'll cover the following...
We'll cover the following...
Problem description
The container has a fixed width of 600px and contains a child element .box that is 200px wide. The task is to center the .box horizontally within its parent so that it sits exactly in the middle.
Goal
Position the .box exactly at 50% of the container’s width.
Constraints
You may only modify or add CSS properties. No additional HTML wrappers or JavaScript are permitted.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.