divを同じ時間に縦横にサイズ変更する

Question

質問によると、画面の中央にあるdivを中心にして、同時にサイズを変更しようとしています。 wrapperはmax-heightを持っているよう

私は、画面は、それが大画面に表示されている場合でも、wrapperを中央に小さいとき、私は、画面のサイズを変更しようとすると、問題が来るcontentのサイズを変更するに何か問題があるとしません。プロパティの場合は、スクリーンのサイズを変更すると垂直方向の中心にならない（常にを占有するため）。

私は中央に配置されdiv（wrapperが）以上300pxないであろうと、常に（両方vertically/horizontally）中央に配置されます決してことをしたいと思います。

は、ここに私のコードです：

HTML：

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 

CSS：

html{ 
    width: 100%; 
} 

body{ 
    width: 100%; 
    background-color: red; 
    margin: 0; 
} 

#wrapper{ 
    position: absolute; 
    max-width: 300px; 
    max-height: 300px; 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#content{ 
    position: absolute; 
    width: 100%; 
    padding-bottom: 100%; 
    background-color: yellow; 
} 

JSFiddle。

多くの設定を試してみましたが、StackOverflowでは多くの質問がありましたが、そのほとんどはhorizontally/verticallyとdivの両方ではなく、horizontally/verticallyのためだけです。

注：flexboxは使用できません。できるだけ実際のCSSコードを維持したいと思います。

max-height（これは私のverticallyのセンタリングが壊れています）の使用を避けても同じ動作をしますか？

---

EDIT：divが既に両方vertically/horizontallyを中心とします。 私が望むのは、正方形が常に正方形で、常に中心に置かれるということです。。私はそれを非常に明確にしていないとすみませます。

コンテンツがサイズ変更されています（四角形で表示されます）。問題は、サイズ変更と同時に垂直方向に並べ替えるだけです。

---

EDIT 2：あなたは、私は上記の編集中に参照する効果を確認したい場合は、水平に私の例JSFiddle上の画面のサイズを変更して、効果を確認します。

ありがとうございます！

Answer 1

これはCSS3 transformで簡単に実行できます。それはあなたが提供したいブラウザのサポートによって異なります。

あなたのコンテンツabsoluteをラッパーの50％に配置することをお勧めします。次に、50％の否定変換を使用することができます。top: 50%とleft: 50%は、コンテンツを左上隅に中央に配置します。 50％の否定変換（translate(-50%, -50%)）は、コンテンツの幅の半分を左に、コンテンツの半分を上に移動します。

#content{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

あなたのjsfiddle

---

更新EDIT

私はあなたの質問初めての一部を誤解見ることができます。しかし、あなたは簡単にあなたのソリューションの一部をマージし、自分の望むものを手に入れることができます。あなただけの上に私の前の回答のpadding-bottom: 100%;でheight: 100%;を交換する必要が

：

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

は、この更新されたjsfiddleを参照してください。 （？）

Answer 2

たぶん私は何かが足りないんだけど、あなただけの代わりにpadding-bottomのご#content CSSにheight:100%;を追加することができますし、それが動作するように見えます：

https://jsfiddle.net/puajxgsz/

また、私は別の方法で再生しました...絶対に何を配置することなく、それを行うには、まあ、それは一種の面白かったので：

https://jsfiddle.net/j0ch7oxj/