Learn how to center a website using HTML and CSS.

Graphic design showing page content centered on a website

See the How to work with HTML layout and Layout web pages with CSS tutorials for more information on how to properly layout a web page with HTML and CSS.

Before (top) and After (bottom) screenshots of the site after centering the page layout in the browser window

When you build a web page, content is positioned on the left by default. Oftentimes, a centered layout is is more aesthetically pleasing and puts your viewer’s eyes on your design. To do this, it is important to structure a page properly in HTML and then apply CSS to center it in the browser.

Click the buttons at the top of the Files panel to switch between the HTML Source Code and the linked CSS stylesheet

Before you start

Download and save the project files. Open center-website.html in Dreamweaver, and view the Source Code in Split view.

Open the source code in the Files panel by choosing Split view

Create a "wrapper" div

Add a <div> tag around everything inside the <body> tags. Since the <div> tag "wraps" around all of the content, give the <div> an id of wrapper. Don't forget a closing </div> tag!

Creating a <div> tag around all of the content on a page makes it easy to apply CSS that controls the whole section. In this case we will use CSS to center all of the content.


<div id="wrapper">

Create a "wrapper" div in the HTML source code

Set the margins with CSS

Open style.css and find the /* Start Here */ section.

Choose View and uncheck Split Vertically. This will stack Code View and Live View one above the other, making it easier to see the content become centered.

Add a margin: property to the selector called #wrapper which matches the id for the <div> in the HTML.

The margin property accepts 4 values for top, right, bottom, left respectively. The full CSS would be margin:0 auto 0 auto; but since the top and bottom values are equal and the left and right values are equal, you can use shorthand:

margin: 0 auto;

The top and bottom values are 0, since we don't need extra space above or below. The left and right margins are set to auto, which will split the space evenly between the two. This centers your layout!


#wrapper {
    margin: 0 auto;

Choose Preview in Google Chrome to see how the page appears when rendered in a browser

Click Preview in Browser and choose your preferred browser to view the newly centered layout.

You will need to save your files to view the changes.

לוגו של Adobe

כניסה לחשבון