0

パーセンテージ マージンを使用して、別の div 内に div を配置しています。これを行うのは、親 div がブラウザーのサイズに基づいてサイズを変更するためです。

デモについては、この jsfiddleを参照してください。

私のCSS：

#test-wrap {
    position: absolute;
    width: 400px;
    height: 250px;
    background-color: pink;
}

.white-wrap {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: white;
    left: 50%; margin-left: -25%;
    top: 50%; margin-top: -25%;
}

これは Safari では正常に機能しますが、Chrome では子divが必要以上に高く表示されます。

おそらく、すべてのブラウザーで動作し、ピクセル マージンに依存しない、そのようなことを達成するためのより良い方法があるでしょうか? どんな提案でも大歓迎です！

4

4 に答える 4

0

これは、これを実現するための私のお気に入りの方法です (最新のすべてのブラウザーと IE8+ で動作します)。

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

そして、これがあなたの例を模倣するjsFiddleです。

于 2013-07-19T08:45:23.103 に答える