1322

divウィンドウの中央に(with position:absolute;) 要素を配置する必要があります。しかし、幅が不明であるため、そうするのに問題があります。

これを試しました。ただし、幅が反応するので調整する必要があります。

.center {
  left: 50%;
  bottom: 5px;
}

どうすればいいですか？

4

37 に答える 37

2043

これは私のために働く：

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

于 2011-11-25T20:07:29.443 に答える
1486 

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

于 2009-11-22T00:21:32.323 に答える
1057

レスポンシブ ソリューション

IE8以下をサポートする必要がない場合、一般的にレスポンシブデザインまたは未知の寸法に適したソリューションです.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}


.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

ここにJSフィドルがあります

手がかりは、変換が要素の幅/高さに対して相対的でleft: 50%あるのに対し、それは親に対して相対的です。translate

このようにして、要素を完全に中央に配置し、子と親の両方に柔軟な幅を持たせます。おまけ: これは、子が親より大きい場合でも機能します。

これで垂直方向に中央揃えすることもできます（また、親と子の幅と高さは完全に柔軟（および/または不明）になる可能性があります）：

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

transformベンダーのプレフィックスも必要になる場合があることに注意してください。例えば-webkit-transform: translate(-50%,-50%);

于 2014-04-30T09:54:57.187 に答える
51

誰かが単一の div タグでそれをやりたい場合に追加したかったのですが、ここに方法があります:

widthとして取る900px。

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

この場合、width事前に知っておく必要があります。

于 2012-08-31T09:56:17.037 に答える
38

絶対中心

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

デモ: http://jsbin.com/rexuk/2/

Google Chrome、Firefox、およびInternet Explorer 8でテストされました。

于 2014-01-30T02:29:07.143 に答える
8

私の知る限り、未知の幅でこれを達成することは不可能です。

シナリオでそれが機能する場合は、非表示の要素を 100% の幅と高さで絶対に配置し、margin: auto および場合によっては vertical-align を使用して要素を中央に配置することができます。それ以外の場合は、JavaScript が必要になります。

于 2009-11-21T22:00:08.677 に答える
7

ボビンスの答えに追加したい：

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

改善: /// これにより、中央の div に大きな要素がある水平スクロールバーが表示されなくなります。

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>
于 2013-01-28T18:58:14.660 に答える
5

以前のレスポンシブ ソリューションのSass / Compassバージョン:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
于 2015-04-01T11:09:06.830 に答える
5

これを行うための便利な jQuery プラグインを次に示します。ここで見つけました。CSSだけでは無理だと思います。

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height();
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
            el.css(css)
    });
};
于 2009-11-21T22:05:35.890 に答える
5

これは私のために働いた：

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
于 2016-05-24T12:25:27.800 に答える
4

私の好みのセンタリング方法：

position: absolute;
margin: auto;
width: x%
  • 絶対ブロック要素の配置
  • マージンオート
  • 左右上下同じ

JSFiddle はこちらです。

于 2014-03-27T21:15:02.423 に答える
3 
#container
{
  position: relative;
  width: 100%;
  float: left
}

#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
于 2014-05-23T09:35:47.553 に答える
1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

これとその他の例はこちら.

于 2013-12-14T13:02:42.633 に答える
-4

私は同様の解決策を使用しました：

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

ここで、「X」は、表示したいdivの幅の半分です。すべてのブラウザで問題なく動作します。

于 2013-02-04T17:29:15.027 に答える