3

次のcssを使用して、コンテンツを垂直方向と水平方向の両方の中央に配置しています。問題は、ブラウザを最小化してコンテンツよりも小さくすると、ブラウザはdiv中央に配置され続けますが、スクロールすることはできません。コンテンツは上部で途切れます。

#splash-centre-container{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 550px;
  width: 760px;
  min-height: 550px;
  padding: 20px;
  margin: -310px 0 0 -400px;
}
4

3 に答える 3

4

これはabsolute、ページの流れから何かを引き出すときに何かを配置するときに、「スペースを占有」しないためです。

画面が小さくなりすぎたときに、スプラッシュ画面の中央にある要素がスプラッシュ画面より小さくならないようにして、画面から外れないように、min-widthand min-heightto （またはそのコンテナ）を適用する必要があります。body

jsFiddle

ここに画像の説明を入力してください

HTML

<div class="spacer">
    <div id="splash-centre-container">abc</div>
</div>

CSS

html, body { 
    min-width:760px;
    height:100%;
    min-height:550px;
    position:relative;
}
#splash-centre-container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 550px;
    width: 760px;
    margin: -275px 0 0 -380px;
    background-color:red;
}
于 2013-03-24T08:15:30.673 に答える
2

あなたはこのようにそれを行うことができます

#splash-centre-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  position: absolute;
  overflow: auto;
  border: solid black 2px;
}

http://jsfiddle.net/btevfik/XMNTM/

于 2013-03-24T08:20:07.880 に答える
0

Chris Coyierは、2009年にここで見つけた最高のソリューションを投稿しました。コンテンツを垂直方向と水平方向に中央揃えにし、動的な高さ（ここに掲載されている他の回答は固定の高さに依存しますが、不必要に制限されます）と小さな画面のスクロールが可能になるため、これが最適だと思います。これは、モーダルポップアップを置き換える中央揃えのインラインフォームを作成するのに最適です。

そのコードをクリーンアップしてSassミックスインに変換したので、フォームの幅を簡単にカスタマイズできます（ヒント：フォーム要素の幅は中央のインラインフォーム内に制限されるため、フォーム要素のCSSと関連する変数をSassミックスインに追加します）。

jsFiddle

SCSS

html,
body,
form {
  height: 100%;
  margin: 0;
  padding: 0;
}

@mixin CenteredInlineForm( $ContainerSetName, $formWidth) {
  div.#{$ContainerSetName}_CenteredForm {
    display: table;
    overflow: hidden;
    margin: 0 auto;
    height: 100%;
    width: #{($formWidth + 15)}px;
    div.#{$ContainerSetName}_CenteredFormContentContainer {
      display: table-cell;
      vertical-align: middle;
      div.#{$ContainerSetName}_CenteredFormContent {
        background-color: lightgrey;
        border: 3px solid darkgrey;
        border-radius: 15px;
        padding: 15px;
      }
    }
  }
  *:first-child + html div.#{$ContainerSetName}_CenteredForm {
    position: relative;
  }
  /*ie6 Support: */
  /* * html div.#{$ContainerSetName}_CenteredForm{position:relative;} */
  *:first-child + html div.#{$ContainerSetName}_CenteredFormContentContainer {
    position: absolute;
    top: 50%;
  }
  /*ie6 Only: */
  /* * html div.#{$ContainerSetName}_CenteredFormContentContainer{position:absolute;top:50%;} */
  *:first-child + html div.#{$ContainerSetName}_CenteredFormContent {
    position: relative;
    top: -50%;
  }
}

@include CenteredInlineForm(UserInfoInput, 400);

HTML

<div class="UserInfoInput_CenteredForm">
  <div class="UserInfoInput_CenteredFormContentContainer">
    <div class="UserInfoInput_CenteredFormContent">
      <p>
        Content or form labels/inputs
      </p>
      ...
    </div>
  </div>
</div>
于 2016-02-19T00:39:36.737 に答える