居中一個CSS盒子？

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

它看起來像什么：

我希望它集中在一起，我該怎么做？ 嘗試在線查找，但它確實沒有用。

Answer 1

要使div（以及許多其他類型的元素）居中，請使用此CSS代碼：

.cont { 
   margin: 0 auto;
   width: XXXpx;
}

的jsfiddle。

確保指定寬度，否則div不會居中。

編輯

要在不指定的情況下居中元素，您可以執行以下操作（但不確定這是否適用於所有瀏覽器）：

body { text-align:center; }
.cont { display:inline-block; }

邊注

不要使用中心標記，不推薦使用。 你可以在這里閱讀更多相關信息。

Answer 2

這是你想要的嗎 ？ 鏈接： http ： //jsfiddle.net/jtFUs/

CSS：

.cont
{
    position: relative;
    margin: 0 auto;
}

Answer 3

如果您需要在頁面上垂直和水平居中div，請使用：

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/

如果您需要水平居中，請使用：

center
{
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

只需定義元素的寬度，在這種情況下我添加了200px例如。

http://jsfiddle.net/65adr/50/