web-dev-qa-db-ja.com

水平方向と垂直方向にDIVを中央揃え

CENTER A DIVを縦横にする方法はありますが、それが重要です。つまり、ウィンドウがウィンドウのサイズより小さい場合、コンテンツは切り取られません。内容divは背景色と幅と高さを持たなければなりません。

与えられた例のように絶対位置と負のマージンでdivを常に中心に置いています。しかし、それはそれが一番上にコンテンツをカットするという問題があります。この問題なしにdiv .contentを中央揃えにする方法はありますか？

私はここでプレイする例を持っています。 http://jsbin.com/iquviq/1/edit

CSS：

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML：

<div class="background">
    <div class="content"> some text </div>
</div>

私の質問は、「要素を水平方向と垂直方向に中央揃えする方法」と重複するものではありません。 （ちょうど日付を確認してください）。 2-私の質問は条件として非常にはっきりと黒で尋ねます：「ウィンドウが内容より小さいとき内容は切られないでしょう」

htmlcsscenter
101
Nrc

多くのことを試した後、私はうまくいく方法を見つけました。それがだれにでも役立つならば、ここでそれを共有します。あなたはそれがここで働いているのを見ることができます： http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }
137
Nrc

最近のブラウザ用

あなたがその贅沢を持っているとき。 flexboxもありますが、これを書いている時点では広くサポートされていません。

HTML：

<div class="content">This works with any content</div>

CSS：

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

さらに詳しく Codepen または JSBin

古いブラウザのサポートについては、このスレッドの他の場所を見てください。

121
iamnotsam

これがデモです。 http://www.w3.org/Style/Examples/007/center-example

メソッド（ JSFiddle example ）

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML：

<div id="content">
    Content goes here
</div>

他の方法（ JSFiddleの例 ）

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>
46
MultiformeIngegno

どのブラウザサイズでもdivのサイズに関係なく、これを行うための正当な方法は次のとおりです。

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

ライブコード

5
suraj rawat

CSSで厳密にこれを行う方法があるとは思わない。その理由はあなたの"important"質問への修飾子です：親要素をその子の内容で拡張することを強制します。

子供の身長を見つけ、調整を加えるには、JavaScriptを少し使用する必要があると思います。

だから、このHTMLで：

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>

このCSS：

。parentElement {
 position：relative; 
 width：960px; 
} 
。childElement {
 position：absolute; [上：50％; 
左：50％; 
}

このjQueryは役に立つかもしれません：

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

影響を受ける要素の下の本体、または$(document).ready(...)の内側のヘッドのいずれかにjQを正しくロードすることを忘れないでください。

1
oomlaut

スタイルを設定したい

margin: auto;

配置スタイル（上、左、位置）を削除します

私はこれが水平に集中することを知っています、しかし私は垂直について確かではありません！

0
Yann

このページで説明されているさまざまな方法を比較できます。 http://blog.themeforest.net/tutorials/vertical-centering-with-css/

彼らが推奨する方法は、中心に傾けることができないコンテンツの前に空のフローティング要素を追加し、それをクリアすることです。それはあなたが言及した欠点を持っていません。

それを適用するために私はあなたのJSBinをフォークしました： http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}
0
clement g