7

cssボックスを別のボックスの内側に垂直方向と水平方向の両方で中央に配置したいことが定期的に発生します。次の制約を満たす最も簡単な方法は何ですか?

  • ボックスは、おおよそではなく、正確に中央に配置する必要があります。
  • この手法は、最新のブラウザーと IE バージョン 8 までで動作するはずです。
  • この手法は、中央に配置されたコンテンツまたは含まれているボックスの幅または高さを明示的に知っていることに依存するべきではありません。
  • コンテナがコンテンツよりも大きいことは一般的に知っていますが、より大きなコンテンツ（対称的にオーバーフローする）をサポートするといいでしょう...
  • コンテナの基礎となるコンテンツは、中央のコンテンツによって隠されている場合を除いて、クリックとホバーに応答できる必要があります。

現在、これを実現するために 4 つ (!) のネストされた div を使用しており、次の行に沿って css を使用しています。

.centering-1 {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    text-align:center;
    visibility:hidden;
}
.centering-2 { 
    height:100%; 
    display:inline-table; 
}
.centering-3 { 
    display:table-cell; 
    vertical-align:middle; 
}
.centering-content { 
    visibility:visible; 
}

これは jsbin snippet として実際に見ることができます。ただし、このアプローチは実行可能ですが、多数のラッパー div があるため極端にやり過ぎのように感じられ、コンテナーよりも大きいコンテンツでは機能しません。CSSで物事を中央に配置するにはどうすればよいですか?

4

2 に答える 2

2

2 つ少ない要素で十分です。これより少ないものは、IE8 (および IE9) がサポートしていないものを必要とします。

http://cssdeck.com/labs/0ltap96z

  <div class="centering-1">
    <div class="centering-2">
      <div class="intrinsically-sized-box">
        <p>You can put any content here too and the box will auto-size.</p>
      </div>
    </div>
  </div>

CSS:

body {max-width:750px;}
.generalblock {
  margin-top:2em; 
  position:relative;
  padding:10px;
  border:20px solid cyan;
  font-size: 18px;
}

.centering-1 {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  visibility:hidden;
  display: table;
  width: 100%;
}
.centering-2 {
  display:table-cell;
  vertical-align:middle;
}
.intrinsically-sized-box {
  visibility:visible;
  max-width:300px;
  margin: 0 auto;
  background: yellow; 
  position:relative;
  border:1px solid black;
}
于 2013-06-28T16:57:04.110 に答える