Transformクロムバグ不透明遷移

を変換するので、私はそのコンテナの中心に欲しいdivを持っています。そのためにTransformクロムバグ不透明遷移

、私は以下のCSSがあります

.inner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    transform: translate(-50%,-50%); 
    padding-bottom: 3%; 
}

をしかし、transform: translate(-50%,-50%);は、その内部のdiv内のコンテンツの不透明度のレンダリングのバグにつながると思われます。ここ

お知らせ：<span>はフェードアウトでhttps://plnkr.co/edit/R1HzsNWTRuvmzdfnArO7?p=preview

あなたは、div要素の残りの部分は奇妙な取得、単語としては、（特にボタン）を気づくも、彼らはかかわらず、同様の効果をフェードアウトアニメ化されていません。 transform: translate(-50%,-50%);を取り除くと、そのバグは表示されなくなります。

私の質問は、transform: translate(-50%,-50%);を維持している間に私がここでできることは何ですか、またはdisplay:table防腐剤を使用してセンターに置く必要がありますか？

body { 
    text-align: center; 
}

が次にあなたが.innerのすべてを削除することができます。

出典

2017-02-01 Summer Developer

あなたは驚かれることと思いますが、しかし、あなたが実際にここで探していること（この場合、bodyで）親要素にtext-alignを設定することです位置決めコードと翻訳コード。しかし、垂直要素を中心に、あなたは.innerでheight: 50%を追加する必要があります。

.inner { 
    width: 100%; 
    padding-bottom: 3%; 
    height: 50%; 
}

私はこのhereを展示更新Plnkrを作成しました。

希望すると便利です。

出典

2017-02-01 03:22:54

を追加することですそれを単に身体の上に水平に置くだけです。私はこれを使うか、display：tableデリバティブを使う必要があります。私はちょうどプランカーの目的のためにそれを単純化しました。 –

親に 'text-align：center'を使うこともできます。' .inner'を 'height：50％'にするだけです:) –

.inner divで絶対センタリングを使用し、高さを宣言し、親divにposition: relative;を宣言してください。

<html> 
    <head> 

    <style> 
     .parent { 
     height: 100% 
     position: relative; 
     } 

     .inner{ 
      margin: auto; 
      position: absolute; 
      top: 0; left: 0; bottom: 0; right: 0; 
      border: 1px solid black; 
      width: 300px; 
      height: 200px; 
     } 

    </style> 

</head> 
<body> 

    <div class="parent"> 
     <div class="inner"> 
      <h1>Hello Code</h1> 
      <p>Hello Code Paragraph</p> 

     </div> 
    </div> 

    </body> 
</html>

Absolute Positioning

出典

2017-02-01 03:55:07

私は、別のdiv内のこの `inner`コンテンツを中心に垂直ではなく、しようとしているので、.innerを中心にする別の方法は、それが動作しません。実際にhtml,body { height: 100%; } body { display: flex; align-items: center; justify-content: center; }

出典

2017-02-01 04:07:40

Transformクロムバグ不透明遷移

答えて

関連する問題