ブロックをページの中央に配置します。

非常に多くの場合、タスクはページ/画面の中央にブロックを配置することです。さらに、Javaスクリプトがなくても、固定サイズや負のインデントを指定せずに、ブロックがサイズを超えた場合にスクロールバーでさえも機能する必要があります。 画面の中央にブロックを配置する方法については、ネットワーク上に非常に多くの単調な例があります。 原則として、それらのほとんどは同じ原則に基づいています。



以下は、問題を解決する主な方法、その長所と短所です。 例の本質を理解するために、指定されたリンクの例の結果ウィンドウの高さ/幅を小さくすることをお勧めします。

オプション1.負のインデント。

上部と左側の属性でブロックを 50％配置し、事前にブロックの高さと幅を知って、ブロックのサイズの半分に等しい負のマージンを設定します 。 このオプションの大きなマイナス点は、マイナスのマージンを数える必要があることです。 また、 ブロックはスクロールバーで囲まれて正しく動作しません-負のマージンがあるため、単純にクリップされます。



例： jsfiddle.net/serdidg/pphzjh25/1

<div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプション2.自動インデント。

あまり一般的ではありませんが、最初のものに似ています。 ブロックの場合 、幅と高さを設定し、属性を右上、左下に0に配置し、マージン自動を設定します。 このオプションの利点は、 親が100％の幅と高さに設定されている場合、 親の作業スクロールバーです。 この方法の欠点は、厳密なサイズ設定です。



例： jsfiddle.net/serdidg/sg0xbw88/1

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプション3。表。

テーブルスタイルを親に設定し、 親のセルの中央にテキストの配置を設定します。 そして、 ブロックにラインブロックのモデルを設定します。 欠点はスクロールバーが機能しないことであり、一般的にテーブルの「エミュレーション」の美学ではありません。



例： jsfiddle.net/serdidg/fk5nqh52/2

 <div class="parent"> <div class="inner"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner { display: table-cell; text-align: center; vertical-align: middle; } } .block { display: inline-block; img { display: block; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例にスクロールを追加するには、デザインに別の要素を追加する必要があります。

例： jsfiddle.net/serdidg/fk5nqh52/3

オプション4。擬似要素。

このオプションには、前の方法でリストされたすべての問題がなく、元のタスクも解決します。 一番下の行は、 親にbefore 擬似要素のスタイルを設定することです。つまり、100％の高さ、中央揃え、ラインブロックモデルです。 同様に、ブロックの中心位置合わせにブロックモデルが設定されます。 最初のサイズが親よりも大きい場合にブロックが擬似要素の下に「落ちない」ようにするには、 親にwhite-space：nowrapおよびfont-size：0を指定します。その後、 ブロックのこれらのスタイルを次の-white-space：normalでキャンセルします。 この例では、コードの書式設定に関連して親とブロックの間のギャップを取り除くために、font-size：0が必要です。 ギャップは他の方法で削除できますが、最善の方法は単にそれを許可しないことです。



例： jsfiddle.net/serdidg/nfqg9rza/1

フォントサイズがゼロの例： jsfiddle.net/serdidg/nfqg9rza/29、jsfiddle.net/serdidg/nfqg9rza/39

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、親がページ全体ではなくウィンドウの高さと幅のみを占めるようにする場合：

 .parent { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプション5。Flexbox。

最も簡単でエレガントな方法の1つは、flexboxを使用することです。 それは不必要なジェスチャーを必要とせず、何が起こっているかの本質を非常に明確に説明し、高い柔軟性を持っています。 この方法を選択する際に覚えておくべき唯一のことは、バージョン10以降のIEのサポートです。 caniuse.com/#feat=flexbox



例： jsfiddle.net/serdidg/zyzvsk9d/1

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; } .block { background: #60a839; img { display: block; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプション6.変換。

構造によって制限され、親要素を操作する方法がなく、ブロックを何らかの方法で整列させる必要がある場合に適しています。 css translate()



関数が助けになります。 値が50％の場合、絶対配置はブロックの左上隅を正確に中央に配置し、変換の負の値はブロックをそれ自体の寸法に対して相対的にシフトします。 負の効果は、ぼやけた顔またはフォントスタイルの形で表示される場合があることに注意してください。 また、同様の方法では、java-scriptを使用してブロックの位置を計算する際に問題が生じる可能性があります。 場合によっては、 left



cssプロパティの使用による幅の50％の損失を補償するために、ブロックに設定されたルールが役立つ場合がありますmargin-right: -50%;



。



例。 jsfiddle.net/serdidg/vjxxo7ua

 <div class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img { display: block; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オプション7.ボタン。

ユーザーazproduction は 、 ブロックをボタンタグで囲むオプションを提案しました 。 ボタンには、その中にあるすべてのもの、つまりラインモデルとブロックライン（インラインブロック）モデルの要素を中央に配置する機能があります。 実際には、使用することはお勧めしません。



例： jsfiddle.net/serdidg/0bn8wg38 。

 <button class="parent"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; } .block { display: inline-block; img { display: block;; border: none; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ボーナス

4番目のオプションのアイデアを使用して、 ブロックの外側のマージンを設定できます。後者はスクロールバーで囲まれて適切に表示されます。

例： jsfiddle.net/serdidg/nfqg9rza/2



画像を中央に配置して、画像が親よりも大きい場合は、 親のサイズに合わせて拡大縮小することもできます。

例： jsfiddle.net/serdidg/nfqg9rza/3

大きな画像の例： jsfiddle.net/serdidg/nfqg9rza/386