jquery - ウィンドウのサイズ変更時に JQuery が自動中央揃え

Question

グーグルで調べて、divを水平および垂直に自動センタリングするためのjQueryスクリプトを見つけました。

例とまったく同じように追加されましたが、1 つの理由により、div はページの読み込みによって中央に配置されず、ウィンドウのサイズ変更時にのみ追加されました。

リンク コードの例: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally /demo.html

デモの例: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally /3.html

私が作成したリンクはオンラインです (テスト): http://i333180.iris.fhict.nl/test/index.html

そして、source-center.js でわかるように、サンプル コードとまったく同じですが、ウィンドウのサイズが変更されたときにのみ中央に配置されます。ありがとう

Answer 1

インラインブロックの回答の代わりに、 position:absolute を追加するだけで使用できます

.className{
position:absolute; 
}

あなたのcssファイルに。

https://jsfiddle.net/26y9aue4/2/

Answer 2

div 内の div を自動的にセンタリングするのは非常に簡単です。クラウドで試すコードは次のとおりです。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

デモ: https://css-tricks.com/centering-css-complete-guide/