162

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>

私の質問は、「要素を水平方向および垂直方向に中央揃えにする方法」の複製ではありません。 1-私の質問は以前に尋ねられました。（日付を確認してください）。2-私の質問は非常に明確に、条件として黒で尋ねます：「ウィンドウがコンテンツよりも小さい場合、コンテンツはカットされません」

4

7 に答える 7

225

最新のブラウザの場合

そんな贅沢をしたとき。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でさらにいじくり回す

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

于 2014-05-16T20:00:31.293 に答える
181

いろいろ試した結果、うまくいく方法を見つけました。誰にとっても役立つ場合は、ここで共有します。ここで動作しているのを見ることができます：http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}
于 2013-02-11T16:49:59.670 に答える
55

ここにデモがあります: http://www.w3.org/Style/Examples/007/center-example

メソッド( JSFiddle の例)

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>
于 2013-01-02T14:53:39.947 に答える
6

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

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

ライブコード

于 2014-11-12T06:00:19.347 に答える
1

これを厳密に CSS で行う方法があるとは思えません。その理由は、質問に対する「重要な」修飾子です。親要素をその子のコンテンツで展開することを強制します。

私の推測では、子の高さを見つけて調整するには、JavaScript を少し使用する必要があると思います。

したがって、この HTML では次のようになります。

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

この CSS:

.parentElement {  
  位置:相対;
  幅:960px;
}
.childElement {
  位置:絶対;
  上: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(...).

于 2013-01-02T16:01:45.423 に答える
1

このページで非常によく説明されているさまざまな方法を比較できます: 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;
}
于 2013-01-02T14:54:45.583 に答える
-4

スタイルを設定したい

margin: auto;

配置スタイル (上、左、位置) を削除します。

これが水平方向に中央になることは知っていますが、垂直方向についてはわかりません!

于 2013-01-02T14:46:50.240 に答える