divで絶対配置された要素を中央に配置する方法は？

1078

div（position:absolute;）要素をウィンドウの中央に配置する必要があります。しかし、幅が不明なため、問題が発生しています。

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

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

何か案は？

css  css-position  center  absolute 
— Hは
ソース
4
あなたは例を持って絶対中央例異なる状況で一般化することができます。
— Mihai8 2013年
2
この質問に対するより適切な回答は、stackoverflow.com
— Andrew Swift

回答:

1333 

<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>
スニペットを展開

— ボビンス
ソース
76
驚くばかり。私のために働いた！私が抱えていた1つの問題：中央に配置した画像が非常に大きく、これにより、外側のdivがページの右端を超え、水平スクロールが発生しました。「左」のcssプロパティを「右」に交換しました。これまでのところ、画面の左端を越えてもスクロールが発生しないため、より適切に機能します
— BoomShaka
ユーザーがページを下にスクロールした場合、オーバーレイが上部に表示されます。スクロールの問題を修正するためにjqueryを使用することは良い考えだと思いますか
— PUG
1
スクロールの問題の1つの解決策は次のとおりposition: fixedですが、オーバーレイの高さがわからない場合、オーバーレイのスクロールバーを実装する必要があります
— PUG
3
この手法を使用して遭遇した小さな問題があります。外側のdivは画面の50％を占めるため、テキストが50％の画面サイズよりも広い場合、シフトが発生します。これを解決するには、外側のdivを「width：100％」に設定し、leftプロパティを削除します。内側のdivについては、text-alignを中央に設定するだけです。これは問題を解決します。
— Nicky L.
3
高さのパーセンテージは、包含ブロック（この場合）を基準にしてい<html>ます。ただし、<html>要素にはheight指定がないため、ドキュメント内のすべてのコンテンツの高さを取得します。これは、コンテンツのみが完全に配置されている（コンテンツフローから取り出されている）ため、何もありません。要素に追加するheight: 100%と、<html>これに違いが生じます。
— ボビンス2014
1801

これは私にとってはうまくいきます：

#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>
スニペットを展開

— マティアス・ワイラー
ソース
36
負のマージンは完全に有効なCSSであり、「ダーティハック」と見なすべきではないということを理解したいだけです。負のマージンは、W3Cボックスモデル仕様で言及されています。一部の人は、それがハックであると恣意的に判断したようです。これは、a）知らない、またはb）悪いCSSを修正するために使用しているためです。
— ジョセフレイブンウルフ2012
58
中央に配置するdivの幅を設定する必要があります。たとえば、テキストが表示されているボタンでは自動的に機能しません。
— Stefan
2
@Joshuaこれは、他の回答のように垂直方向ではなく、水平方向にのみ中央揃えになります。
— ygoe 2013年
3
ビューポートのサイズが大きくならないので、私はこのソリューションを好みます。
— iceydee 2013年
13
ブラウザー間のサポートの場合：widthこれを機能させるには、特定の値に設定する必要があります。autoそして100%要素をセンタリングしません。display: block;必見です。position: absolute;必須ではありません。すべての値が機能します。親要素positionは以外に設定する必要がありstaticます。設定leftとrightすることが0不要です。margin-left: auto; margin-right: auto;仕事をします。
— OnurYıldırım2014年
767

応答性の高いソリューション

IE8以下をサポートする必要がない場合のレスポンシブデザインや一般的な不明な寸法に対する優れたソリューションを次に示します。

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

コードスニペットを表示

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

手がかりは、それleft: 50%はtranslate変換が要素の幅/高さに関連している間、それが親に関連していることです。

このようにして、完全に中央に配置された要素があり、子と親の両方で幅が柔軟になります。ボーナス：これは、子供が親よりも大きい場合でも機能します。

これを垂直方向に中央に配置することもできます（ここでも、親と子の幅と高さは完全に柔軟です（および/または不明）。）

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

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

— ProblemsOfSumit
ソース
26
IE7のサポートが不要になったため、これは事実上のソリューションになるはずです。このソリューションは、要素を全幅にし、幅を保持して未知の幅の要素で機能するため、left：0 / right：0の手法よりも優れています。
— aleemb 2014年
51
はるかに良い答えは、divが含まれているボックスが子よりも小さい場合です。
— ケース
2
@ChadJohnsonもちろんです。webkit-私が提案したように、接頭辞を付けて試してください。
— ProblemsOfSumit
2
ああ、私は-webkitに関するあなたのメモを見逃しました。驚くばかり。
— Chad Johnson、
3
transform: translateposition: fixed子供には使えなくなるようです。この場合、受け入れられた回答の方が効果的です。
— dmvianna 2015
49

本当にいい投稿..誰かが単一のdivタグでそれをしたいのなら、ここに出て追加したいだけです：

widthとして取る900px。

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

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

— プラティカブ
ソース
26
"because the width is unknown"...これは質問の答えにはなりません
— Michel Ayres 2013年
15
こんにちは@Michel実際に絶対divの中央揃えに関連する何かをグーグル検索すると、このリンクが最初のリンクになります。私がこのようなソリューションを探している場合に備えて、このソリューションを追加したのはそのためです.. :)
— プラチカブ2013年
1
レスポンシブデザインにはあまり役立ちませんが、レスポンシブデザインを始めるまではうまくいきました。これは、絶対的に配置された既知の幅要素を中央に配置するための有効な答えです。
— Sean Kendle 2014年
35

絶対中心

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、IE8でテスト済み

お役に立てれば ：）

— イヤス・アメーヌディーン
ソース
これは機能しません。次のcodepen codepen.io/anon/pen/YqWxjJ
— Mark
1
申し訳ありませんがこれはうまくいくと思いますが、高さと幅の固定コード
— Mark
31

垂直と水平のこの作品 

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

要素の親を中心にしたい場合は、親の相対位置を設定します

 #parentElement{
      position:relative
  }

編集：

  • 垂直中央揃えでは、要素に高さを設定します。@Raulに感謝

  • 要素を親の中心にしたい場合は、親の位置を相対に設定します

— モーセンアブドラヒ
ソース
2
垂直を機能させるには、高さを追加する必要があると思います。
— Raul
この位置はページの中央であり、別の要素の中央ではありません。
— ギュンターZöchbauer
1
@GünterZöchbauerはい、要素の親を中心にしたい場合は、親の相対位置を設定します。
— Mohsen Abdollahi 2015年
20

解決策を検索すると、上記の回答が得られ、コンテンツをMatthias Weilerの回答に集中させることができますが、text-alignを使用できます。

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

ChromeとFirefoxで動作しました。

— カビラ
ソース
5
「text-align：center」は不要だと思います
— Tobias
これで私の問題は解決しました。ありがとう！
— Volomike 2016
「text-align：center」が必要でしたが、@ ProblemsOfSumitによって提案されたソリューションがテキストを折り返すために機能しない場合に機能しました。
— Nat
15

** 応答性の高いソリューション **

divの要素を想定すると、別のdivです...

このソリューションは正常に動作します

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

容器は任意のサイズであってもよい（相対位置でなければなりません）

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

要素（div）は任意のサイズにすることもできます（コンテナよりも小さくなければなりません）

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

結果は次のようになります。コードスニペットを実行する

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}
<div class="container">
	<div class="center"></div>
</div>
スニペットを展開

とても役に立った

— RealMJDev
ソース
1
天才。なぜ他の人はこれを考えなかったのですか？
— mesqueeb
コーディングありがとうございます
— RealMJDev
13

これは他の答えの組み合わせであり、私たちにとってはうまくいきました：

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
— クラシャロット
ソース
素敵な修正ありがとうございます！
— Stanley Bateswar
12

この質問にはすでにいくつかの回答があることを理解していますが、ほとんどすべてのクラスで機能する、意味のあるエレガントな解決策を見つけたことがありません。

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>
スニペットを展開

これが言うことは、a top: 50%とaを与えleft: 50%、X / Y軸の両方で-50%値を変換（スペースを作成）することです。つまり、「ミラースペースを作成する」という意味です。

そのため、これはdivの4つのポイントすべてに等しいスペースを作成します。これは常にボックスです（4つの側面があります）。

この意志：

  1. 親の高さ/幅を知らなくても作業できます。
  2. レスポンシブに取り組みます。
  3. X軸またはY軸で作業します。または、私の例のように両方。
  4. うまくいかない状況は思いつきません。
— ダニエル・モス
ソース
これが機能しない状況を見つけた場合はお知らせください。入力内容を変更して質問を編集できます。
— Daniel Moss
変換/翻訳すると、サファリは特定のスケールでテキストをぼかします
— James Tan
@DanielMoss使用しない理由はありますtranslate(-50%,-50%);か？
— Mark Ba​​ijens
12

コンテナ要素の中央に配置したい絶対配置要素のランダムな未知の幅で機能します。

デモ

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
— ローテクサン
ソース
9

Flexを使用して、絶対位置のdivを中央に配置できます。

display:flex;
align-items:center;
justify-content:center;

コードスニペットを表示

— ダヴァル・ジャルドシュ
ソース
私の画面では-Firefox 68.x、それはちょうど整列しません、絶対ブロックは相対ブロックの下部に表示されます
— Webwoman
これを試すことができますdisplay: -webkit-flex;か？
— Dhaval Jardosh
7

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

あなたは-それがあなたのシナリオでうまくいくなら-幅と高さ100％の目に見えない要素を絶対的に配置し、マージンを使用して要素をそこに中央揃えにすることができます：autoとおそらく垂直方向の配置。それ以外の場合は、Javascriptが必要になります。

— ペッカ
ソース
「マージン：自動」の場合は+1。私は以前に、「マージン：0オート」という行を使用してdivを水平方向に中央揃えするためにこれを試しました-「0」は垂直マージンに適用され、「オート」は水平に適用されます。これは、StackOverflowが最上位のdivでページの両側にある2つの太い白い境界線を取得するために使用するものだと思います。ただし、CSSマージンのW3Schoolsページには、「これの結果はブラウザーに依存している」という自動値が記載されています-私は多くの異なるブラウザーで個人的に試したことがないため、この点についてコメントすることはできません（しかしそれは明らかにそれらのいくつかでトリックを行います）
— Steg '21
1
IE8に問題がない場合は、幅（および高さ）が不明になる可能性があります。詳細については、私の回答を参照してください。
— ProblemsOfSumit 14
7

@bobinceの答えに付け加えたいのですが：

<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>
— 瓶
ソース
6

これを行うのに役立つ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)
    });
};
— ベン・シェロック
ソース
これはより良い方法であり、特に応答性の高い設計ではそうです。
— m4tm4t 2012年
いずれにせよjQueryが使用されていれば、些細なことでしょう
— コードウィスパー
8
これは良い方法ではありません。可能な限りCSSを使用することをお勧めします。DIVの中央揃えは、すべての軸でCSSを使用することで可能です。JavaScriptは必要ありません。
— ProblemsOfSumit 14
1
@yckart、この場合のツールはCSSです。
— ProblemsOfSumit
5

上記のレスポンシブソリューションのsass / compassバージョン：

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
— アダム・スペンス
ソース
4
transform: translate(-50%, -50%)Webkitブラウザを使用して、OS Xでテキストやその他すべてのコンテンツをぼやけさせます。keithclark.co.uk/articles/gpu-text-rendering-in-webkit
— 夜叉
-webkit-font-smoothing: antialiased;私があなたが投稿した記事からそれを収集したあなたが好きなタイプのアンチエイリアスを使用してください！
— Adam Spence
4

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

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

JSFiddleはこちら

— vp_arth
ソース
3

私はすでに回答を提供していることを知っています。私の以前の回答は、他の回答とともに、問題なく機能します。しかし、私はこれを以前に使用したことがあり、特定のブラウザーおよび特定の状況でより適切に機能します。だから私もidがこの答えを与えると思った。私は以前の回答を「編集」して追加しませんでした。これは完全に別の回答であり、提供した2つは関連性がないと思うからです。

HTML：

<div id='parent'>
  <div id='child'></div>
</div>

CSS：

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
— ダスティンポワッサン
ソース
3 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
— Burcu AKCAOGLU
ソース
2

このソリューションは、要素にwidthとheight 

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>
スニペットを展開

— Mo.
ソース
2

私の場合、この質問の解決策は機能しませんでした。いくつかの画像にキャプションを付けており、これを使用して解決しました

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>
スニペットを展開

— マルコゴメス
ソース
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;
}

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

1

これは、DIVをページの中央に正確に浮かせるために私が考え出したトリックです。もちろん本当に醜いですが、すべてで機能します

ドットとダッシュ

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

クリーナー

あの5年間は飛んだだけでしたね。

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Bさん
ソース
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
— AndreyP
ソース
0

幅のわからないブロックを水平方向に中央揃えするのに役立つ単純なアプローチ：

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

#blockルールセットにtext-alignプロパティを追加して、ブロックの配置とは無関係にコンテンツを配置できます。

これは、Firefox、Chrome、IE、Edge、Safariの最近のバージョンで動作しました。

— テレンス・バンドーアン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.