2

ページに次のような div があるとします。

<div class="center"></div>

私のCSSは次のようになります。

.center{
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: ?
    margin-top: ?
}

上記のように、私が知る必要があるのは、設定margin-leftとmargin-top値の方法だけです。.centerdivの既知の幅と高さ(それぞれ 300px など)がある場合、値をその値の半分 (両方とも -150px) に設定margin-leftします。margin-top

.centerしかし、私の質問は、 divの幅/高さが不明な場合(または動的であると言う場合) 、これらの値をどのように設定するのですか?

ある種の CSS 式を使用できますか、それともクロスブラウザーの制限がありますか? これを行う最善の方法は何ですか？

4

5 に答える 5

4

水平方向に中央に配置するのは非常に簡単です。使用する

width: 50%; /* or anything other than auto */
margin-left: auto;
margin-right: auto;

または代わりに：

margin: 0 auto;

垂直方向の中央に配置するのは少し難しく、divを囲む他の要素に大きく依存します。いくつかの指針については、この記事を参照してください。

于 2013-03-16T05:20:21.733 に答える
4

このパターンの最も単純なバージョン。

 .center-block
 {     
      margin: 0 auto
 }
于 2013-03-16T05:21:41.557 に答える
3

div のサイズが固定されていない場合、残念ながら唯一の方法は JavaScript を使用することです。

例(jsFiddle デモ) :

Javascript(jQuery)

var $container = $('#centered');

var mLeft = $container.outerWidth() / 2;
var mTop = $container.outerHeight() / 2;

$container.css({
    'margin-left': -mLeft, 
    'margin-top': -mTop,
});

CSS:

html, body {
    height: 100%;
}
#centered {
    position: absolute;
    left: 50%;
    top: 50%;
    background: red;
}
于 2013-03-16T05:41:17.367 に答える
1

明示的な幅がなく、使用する祖先要素がなく、div が 1 つしかない場合、残っている唯一のオプションは、JavaScript または jQuery を使用することです (それがオプションである場合)。

jQuery を使用した JSFiddle デモ(マージンを動的に設定)。

CSS

.center {
    position: absolute;
    left: 50%;
    top: 50%;
}

jQuery

var leftOffset = $('.center').width() >> 1;
var topOffset = $('.center').height() >> 1;
$('.center').css('margin', '-' + topOffset + 'px 0 0 -' + leftOffset + 'px');
于 2013-03-16T05:44:18.380 に答える
0

ページのdivを中央に配置します。Widthプロパティを設定する必要があります。

.center{
   background:red;
   margin: 0 auto;
   width:500px;
}
于 2013-03-16T05:26:17.700 に答える