Center content on any browser - html

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

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;
}

Answer 2

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 3

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 4

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%;
}