One of the challenges in web designing is to make your layout to appear in the centre of the page regardless of the sizes of the size of the viewers’ browsers. In order to make the layout and contents to be in the centre of the page, we need to wrap them inside a container. So how do we do that?
First, we need to define the properties of the container.
#container {
margin: 0 auto;
width: 800px;
}
By setting the margin to be 0 auto, we are specifying the container to have 0 pixels on top and bottom, while the left and right sides will have auto margins.
Next, wrap all the contents of your website including your layout designs inside this container. For example:
Your layout codes in here