絶対要素は、Firefox

下奇妙な行動につながるこのコードは、Chromeで意図したとおりに動作します：絶対要素は、Firefox

アニメーションのための青いボールを上にマウスを移動してください：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .container { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 200px; 
 
     border: thin solid #6D6; 
 
     overflow: hidden; 
 
    } 
 
    h2 { 
 
     position: absolute; 
 
     border-radius: 100%; 
 
     background-color: blue; 
 
     height:100px; 
 
     width: 100px; 
 
     transition:all 1s ease-out; 
 
     margin: auto; 
 
     left: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
    } 
 
    
 
    h2:hover { 
 
     height: 300px; 
 
     width: 300px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='container'> 
 
    <h2></h2> 
 
    </div> 
 
</body> 
 

 
</html>

しかし、真ん中のボールがFirefoxの下部に広がって、正しい位置に戻すために上または下を設定する必要があります。 Chromeのようにトップとボトムの値を割り当てずに途中にとどまるようにする方法はありますか？

出典

2016-05-23 Ry Van

相対配置されたコンテナの中央にあるブロック要素を中央に置くには、top: 50%とtransform: translateY(-50%)を使用します。

それは、IE9 +

.container { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 200px; 
 
     border: thin solid #6D6; 
 
     overflow: hidden; 
 
    } 
 
    h2 { 
 
     position: relative; 
 
     border-radius: 100%; 
 
     background-color: blue; 
 
     height: 300px; 
 
     width: 200px; 
 
     margin: auto; 
 
     top: 50%; 
 
     transform: translateY(-50%); 
 
    }

<div class='container'> 
 
    <h2></h2> 
 
    </div>

必要とJSFiddleデモ：私はいけないhttps://jsfiddle.net/oujab44t/1/

出典

2016-05-23 13:07:30 Narxx

その何か、余分なポジショニング。あなたが見ることができるように、chromeは、追加の設定なしにその要素を中央に維持しながら要素を保持します。Firefoxのデフォルトの動作かもしれません。 –

@RyVan Chromeで何かが何らかの形で動作しているという理由だけで、これが標準であるとは限りません。アイデアはどこでも同じように動作するコードを書くことです。あなたはChromeで開発しています.Firefoxはさまざまなことを示していると不平を言っています。最初にFirefoxで開発したのであれば、この問題は発生しません。私のアドバイスは残っている。私は多くの場所で見たことが良い練習です。それはハックではありません。 – Narxx

ありがとう、しかし、私が知る必要があるのは天気です。それはFirefoxで同様のことをする可能性があります。 –

-4

<head> 
    <style> 
    .container { 
    to; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    } 
    </style> 
</head> 
<body> 
    <div class='container'> 
    <h2></h2> 
    </div> 
</body> 
</html>

出典

2016-05-23 13:11:42

このコードスニペットは問題を解決するかもしれませんが、[説明を含む]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）は本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 – gunr2171

答えて

関連する問題