1

私はいくつかのコードを見直していますが、それが機能している間、以下の CSS がどのように内側の div を中央に配置しているのか理解できません。

Codepen のデモも利用可能です。

HTML

<div class='outer'>
  <div class='inner'></div>
</div>

CSS

div {
  border: 1px solid black;
  box-sizing: border-box;
}

.outer {
  position: absolute;
  background-color: goldenrod;
  width: 100%;
  height: 100%;
}
.outer .inner {
  width: 75%;
  height: 75%;
  background-color: green;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
4

3 に答える 3

1

それはただのせいです

 margin: auto;

BoxModelからこれをよりよく理解することができます。

于 2013-03-20T14:53:52.340 に答える
1

これがあなたの質問に対する答えです。

要素のmargin: auto左側と右側の間で使用可能なスペースを均等に分割するようブラウザに指示するだけです。親コンテナーの左端と右端の間の使用可能なスペースによる、占有されていない水平スペース。

参照

于 2013-03-20T15:18:10.803 に答える
0

何らかの理由で、職場の同僚が甘い SO ポイントを望んでいないので、ここに彼の答えがあります。

置くとしたら

top: 0;
bottom: 0;
left: 0;
right: 0;

高さや幅のない通常の div では、div がそのコンテナの全体のサイズになります。そのdivheightをwidth配置すると、それが制約され、コンテナを埋めようとする間、設定された寸法が尊重されます。

前述のように設定margin: auto;することが重要です。これにより、この div のボックスは、設定された寸法を尊重しながらマージンを均等に拡張することで、コンテナーを埋めることができます。

これは物事を中心に置くための最良の方法ですか？わかりませんが、うまくいきます。

于 2013-03-20T15:30:42.077 に答える