It's easy to center a liquid layout with CSS. And centering a layout is one of the more popular ways of laying out a Web page.
Difficulty: Easy
Time Required: 10 minutes
Here's How:
- Create a new Web page with a CSS style sheet in your HTML editor.
- Create a div element as the main element on the page where you'll store everything on the page.
- Give that div element an ID that is unique on the page.
- Open your CSS style sheet and add margins on the right and left of the #main div element.
div#main {
margin-left: 15%;
margin-right: 15%
} - Save your page and your style sheet.
- Test in several Web browsers.
Tips:
- Make the margins even on both sides.
- The margins can be any unit of measure, as long as they are the same.
- This will center the layout box but not the content within it. Use text-align to center the inner content.
- This layout will flex to match the width of the browser screen.
