40

重複の可能性:
<div> をページの中央に揃える方法

画面のサイズに関係なく、画面のサイズが大きくても小さくても、解像度が高くても低くても、Webページのコンテンツを画面の中央に表示する必要があります。常に自動的に画面の中央に調整されます。

4

4 に答える 4

59

ブラウザのウィンドウサイズに関係なく、ボックスを垂直方向と水平方向の両方で中央に配置したいと思います。ボックスの幅と高さが固定されているため、これは機能するはずです。

マークアップ:

<div></div>

CSS:

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

ブラウザのサイズを変更しても、div は画面の中央に残るはずです。margin-top と margin-left を表の高さと幅の半分に置き換えるだけです。

編集：クレジットはCSS-Tricksに送られ、そこで私は元のアイデアを得ました。

于 2012-06-19T02:41:59.803 に答える
7

投稿したコードの解決策:

.center{
    position:absolute;
    width:780px;
    height:650px;
    left:50%;
    top:50%;
    margin-left:-390px;
    margin-top:-325px;
}

<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
      <tr>
        <td>
        <table width="100%" border="0">
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
</table>

--

これはどのように機能しますか？

例: http://jsfiddle.net/953Yj/

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

.center{
    position:absolute;
    height: X px;
    width: Y px;
    left:50%;
    top:50%;
    margin-top:- X/2 px;
    margin-left:- Y/2 px;
}
  • Xはあなたの身長です。
  • Yはあなたの幅になります。

をdiv縦横に配置するには、 XとYを2で割ります。

于 2012-06-19T03:20:36.047 に答える
4

コンテンツを水平方向と垂直方向の中央に配置したいが、ページの高さが事前にわからない場合は、JavaScript を使用する必要があります。

HTML:

<body>
    <div id="content">...</div>
</body>

CSS:

#content {
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}

JavaScript (jQuery を使用):

$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});

水平方向と垂直方向の中央揃え

デモ: http://jsfiddle.net/nBzcb/

于 2012-06-19T02:59:21.497 に答える
0

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Center</title>        
    </head>
    <body>
        <div id="main_body">
          some text
        </div>
    </body>
</html>

CSS

body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}​

JS (jQuery)

$(function(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var main = $("#main_body");    
    $("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
                          left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});

ここで例を参照してください

于 2012-06-19T06:58:06.470 に答える