Center a CSS box? - html

Question

HTML:
<div class="cont">
<center>
<div class="xmdiv">
<img class="xmenu" src="media/file1.png">
<img class="xmenu" src="media/file2.png">
</div>
</center>
<p>-snip-</p>
</div>
CSS
.cont {
position: relative;
margin-top: 3%;
background-color: transparent;
width: 65%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 1px;
-moz-box-shadow: 0px 0px 11px #000000;
-webkit-box-shadow: 0px 0px 11px #000000;
box-shadow: 0px 0px 11px #000000;
font-family: 'Open Sans', sans-serif;
color: #070707;
font-size:15px;
font-weight:300;
text-align:justified;
line-height:1.5;
}
p {
margin-left: 8px;
margin-right: 8px;
}
What it looks like:
I want it to be centered, how do I do that? Tried looking it up online, and it didn't really work.

Answer 1

Is this what you want ? Link: http://jsfiddle.net/jtFUs/
CSS:
.cont
{
position: relative;
margin: 0 auto;
}

Answer 2

If you need to center a div vertically and horizontally on your page, use:
div {
width: 100px;
height: 100px;
background-color: #000000;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://jsfiddle.net/65adr/48/
In case you need to center it just horizontally, use:
center
{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
Just define a width for the element, in this case i added 200px for example.
http://jsfiddle.net/65adr/50/

Answer 3

To center a div (and many other types of elements), use this CSS code:
.cont {
margin: 0 auto;
width: XXXpx;
}
JSFiddle.
Make sure to specify the width, or else the div won't be centered.
Edit
To center an element without specifying with, you could do something like this (not sure if this will work in all browsers, however):
body { text-align:center; }
.cont { display:inline-block; }
Side-note
Don't use the center tag, it is deprecated. You can read more about it here.