Center content on any browser

Question

I have the following CSS. It needs to be centered on any screen but currently it is only centered on a certain kind of screen:

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

    html{
    /*  font-family: 'Roboto Condensed', sans-serif;*/
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
       font-weight: 20;
    }

    #description{
        position: absolute;
        top: 200px;
        left: 400px;
    }
    #content{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 100%;
        display:table-cell;
        vertical-align: middle; 
    }
    h1{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h1:hover{
      color:#4A4A4A;
    }
    h2{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h2:hover{
      color:#4A4A4A;
    }
    a{
        color:black;
        text-decoration: none;
      margin: 0px auto;
      width: 400px;
    }
    .circular{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      -webkit-border-radius: 75px;
        -moz-border-radius: 75px;
        background: url(./images/profile_picture.jpg) no-repeat;
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    }

    ul{
        padding: 0;
      text-align:center; 
      padding-top: 5
    }
    ul a img {
        padding-top: 20px;    
    }
    li{
        list-style: none;
        text-align: center;
        font-size: 30px;
        display: inline-block;
        margin-right: 10px;
    }

    #back{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        z-index: -99999;
        background-color: #f7f7f7;
        background-size: cover;
        background-position: center center;
        opacity: .2;
    }

Currently my website only centers on a 4x3 screen. How can I adjust my CSS to center on any size screen?

Edit: Same question is here with HTML.

Answer 1

Firstly define the Div id in HTML as:

<div id="page">
website content
 </div>

Then in CSS: set width, and add margin: 0 #page { margin:0 auto; width:50%; }

Answer 2

Wrap your content, set width, and add margin: 0 auto to the wrap's css

<div id="body">
   <div id="wrap">
       <div id="center">Center</div>
   </div>
</div>

#wrap {
    margin:0 auto;
    width:50%;
}

Fiddle

Answer 3

Update: The answer from Magesh Kumaar is better, but this still works.

Without seeing the code on your page, it is a little difficult. But to center a DIV on any screen you should use the following code:

#divID {
    position: absolute;
    width:400px;
    left:50%;
    margin-left:-200px; /*This should always be 50% of your width*/
}

You should then wrap the rest of your website in the DIV.

<div id="divID">
    YOUR WEBSITES CONTENT GOES HERE
</div>

Answer 4

You have not posted your HTML code (dont know why (?))!

Well the trick to center an element with CSS is to give the element a left and right margin value of auto

#wrapper
{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

This is also similar to margin:0 auto which is widely used !

Wrap your content using a <div id="wrapper">...</div> and set a width !

To center an image, add display:block to it since by default the images have display:inline property.

#myImage
{
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}