不明なサイズのDIVを画面中央に水平に、画面上に垂直に配置する方法

DIVの中心を画面中央に配置する必要があります。水平と垂直の両方でDIVの中心を設定する必要があり、DIVのサイズがわからないため、divはposition:fixed;です。不明なサイズのDIVを画面中央に水平に、画面上に垂直に配置する方法

divのサイズがわからないので、このマイナスマージンのトリックは機能しません。 top:50%; left:50%; magin-top:-100; margin-left:-100;

も垂直方向に中央しませんposition:fixed;とmargin-top:auto; margin-bottom:auto;では動作しませんので、margin-left: auto; margin-right: auto;は動作しません。

私はこの方法を見つけました：display: table-cell; vertical-align: middle;エーテルは機能しません。

getComputedStyleを使ってdivコンテンツのサイズを取得する方法を知っています。位置を修正するための数学を行いますが、毎回JSをトリガーしたくないので、純粋なCSSソリューションが必要です。私のdivの内容が変更されます。

出典

2012-05-20 Vitim.us

あなたの 'div'コンテンツはどう変わっていますか？プレーンなCSSアニメーションやJavaScriptアニメーションを通じて？ – balexandre

@balexandre Ajax経由のアニメーションやコンテンツの変更はありません –

この作品のようなものはありますか？ display: table-cellも使用しますが、2つのdivタグが必要です。display: tableスタイルの親タグが指定されています。

NB：z-index:-1;をセンターベースクラスに追加しました。あなたのデザインに基づいてこれを微調整したいかもしれません。

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

あなたはcenterpane内中央に整列されていないテキストを追加する必要がある場合、あなたはcenterpane内の別のdivを追加して、のようなものとしてのスタイルを指定することができます：text-align:left; width:400px; margin:0px auto;あなたは、この追加のdivのために幅を指定する必要があります。

出典

2012-05-20 06:31:38 signal2013

demo（高さは不明、幅は設定されています）をご覧ください。

あなたはcssテーブルを使用できます（この例では、htmlはテーブルですがbodyはtable-cellです）。マークアップ：

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

CSS：

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

あなたは= 7 IE <の回避策が必要です（IE <以来7はテーブルについて知らない= |テーブルセル）？

出典

2012-05-20 08:31:57 roger

私はコンパイルしたブラウザが必要です。 htmlやbodyのスタイルを変更しても、ページ上の他のインラインコンテンツが混乱することはありませんか、divラッパーと一緒に使えますか？ –

cssテーブルの助けを借りて、高さが不明なボックスを垂直方向にセンタリングすることができます。箱の高さは内容によって決まります。 の位置を使用するdemoを参照してください。ボックスのプロパティはと固定されています。ボックスのの幅はと同様に設定されています。

そして、これはIE < = 7の回避策です：

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

が、これはあなたの要件を満たしていますか？

出典

2012-05-20 17:28:03

ポジションを使用して作業している場合は、トランスフォームプロパティが役立ちます。

あなたはただ、センタリングしている要素に

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

を以下のプロパティを追加する必要が要素に追加し、余分なマージンとパディングを削除してください。

出典

2017-04-19 11:00:23

不明なサイズのDIVを画面中央に水平に、画面上に垂直に配置する方法

答えて

関連する問題