css - css を使用してオブジェクトをセンタリングするために、この方法は許可されていますか?

Question

これはオブジェクトを中央に配置する方法ですか? この方法でも正確な中心位置が作成されますが、これを行う別の方法はありますか?

.content {
    width:1200px;
    height:800px;
    position:absolute;
    left:50%;
    margin-left:-600px;
    top:50%;
    margin-top:-400px;
}

御時間ありがとうございます。

Answer 1

簡単に試してください：

content{
   margin:50% auto;
   text-align:center;/* if content has text then*/
   /*Your other properties like:width,height,etc*/
}

Answer 2

を使用してこのように解決しdisplay: table-cell;ます。このようにして、垂直方向と水平方向の中央に配置され、表示する要素の高さに依存しません。

HTML

<div class="wrapper">
    <div class="content">
        I'm centered.
    </div>
</div>

CSSS

html {
    width: 100%;
    height: 100%;
}
body {
    display: table;
    width: 100%;
    height: 100%;
}
.wrapper{
    display: table-cell;
    vertical-align: middle;
}

.content {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
}

デモ

http://jsfiddle.net/Gyq4t/

ノート

これは、最新のすべてのブラウザーで正常に機能します。IE7では動きません。

Answer 3

水平方向と垂直方向の両方でdivを中央に配置したい場合は、これが正確な方法です。

負のマージンは、高さと幅のちょうど半分であり、要素を完全な中央に引き戻します。固定の高さ/幅の要素でのみ機能します。

またはあなたが使用することができます

.content{
    width:400px;
    height:200px;
    text-align:center;
    line-height:200px;
}

または、特定の対策がない場合はインラインコーディングで使用できます

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–&gt;
</div>
</div>  

さらにヘルプが必要な場合は、このチュートリアルにアクセスしてください。これは、要素を水平方向と垂直方向の中央に配置することを理解するのに非常に役立ちます。

よろしく。