web-dev-qa-db-ja.com

絶対位置の要素をdivの中央に配置する方法

ウィンドウの中央にdiv（position:absolute;を含む）要素を配置する必要があります。 幅がわからないので - 私はそうすることに問題があります。

私はこれを試しました。しかし、幅に応じて調整する必要があります。

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

何か案は？

csscss-positioncenterabsolute
974
Ish

<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>

1241
bobince

これは私のために働く：

#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>

1698
Matthias Weiler

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

これは良い解決策です レスポンシブデザインや未知の寸法の場合 一般に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 Fiddleです /

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

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

これを使ってそれを垂直方向にセンタリングすることもできます（そして、親子の幅と高さは完全に柔軟（または未知））

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

接頭辞として_ transform _ベンダーも必要になるかもしれないことを覚えておいてください。例えば-webkit-transform: translate(-50%,-50%);

620
ProblemsOfSumit

本当にいい投稿..誰かが単一のdivタグでそれをやりたいのであればここで方法を追加したいと思いました

widthを900pxとします。

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

この場合、widthを事前に知っておくべきです。

48
pratikabu

絶対中心 

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

お役に立てれば ：）

31
Ijas Ameenudeen

垂直方向と水平方向のこの作品 

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

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

 #parentElement{
      position:relative
  }

編集：

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

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

30
Mohsen Abdollahi

解決策を探す上で答えを得て、 Matthias Weilerの答えを中心にしてコンテンツを作成することができますが、text-alignを使用します。

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

クロムとFirefoxで動作しました。

19
cavila

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

.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>

これが何を言っているのかというと、top: 50%とleft: 50%を与えてから、X/Y軸の両方を-50%の値に変換（スペースを作成）します。

そのため、これはdivの4つの点すべてに等しいスペースを作成します。これは常にボックスです（4辺を持ちます）。

この意志：

  1. 親の高さ/幅を知らなくても作業できます。
  2. レスポンシブに取り組みます。
  3. X軸またはY軸で作業します。私の例のように、あるいは両方。
  4. うまくいかない状況を思いつくことはできません。
11
Daniel Moss

コンテナ要素の中心に配置したい絶対位置要素の任意の未知の幅に作用します。 

デモ

<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
lowtechsun

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

あなたのシナリオでうまくいくのであれば - 見えない要素を幅と高さを100％にして絶対に配置し、その要素を余白を使って中央に配置することができます。それ以外の場合は、それを行うにはJavascriptが必要です。

9
Pekka 웃

@ 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>
7
Vial

これを行うための便利な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)
    });
};
6
Ben Shelock

私が好むセンタリング方法：

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

JSFiddle ここ

4
vp_arth

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

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

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
4
Alan

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

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
4
Adam Spence
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
3
Burcu AKCAOGLU

私は私がすでに答えを提供したことを知っています、そして私の以前の答えは与えられた他の人と一緒に、ちょうどうまくいく。しかし、私は過去にこれを使用していて、それは特定のブラウザと特定の状況でよりよく機能します。だから私はidもこの答えを与えると思いました。これは完全に別の回答であり、私が提供した2つは関連していないと感じるので、私は以前の回答を「編集」して追加しませんでした。

HTML：

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

CSS：

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
3
Dustin Poissant

フレックスを使用して、絶対位置のdivをセンタリングできます。

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


.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}
<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

2
Dhaval Jardosh

この解決法は、要素が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>

2
Mo.

これは、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>

1
Mr. B

この質問の解決法は私の場合にはうまくいきませんでした。

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
Marcogomesr

HTML

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

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/ /

1
Dustin Poissant

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
user3102226

absolute、leftおよびrightプロパティを中心とし、widthプロパティを指定せずにミドルウェアのdiv#centeredボックスを作成し、メインコンテンツdivをその子としてdisplay:inline-blockボックスを使用して設定し、text-align:centerをミドルウェアの親ボックスに設定することもできます。

#container{
  position: relative;
  width: 300px;
  height: 300px;
  border: solid 1px blue;
  color:#dddddd;
}

#centered{
  position: absolute;
  text-align: center;
  margin: auto;
  top: 20px;
  left:0;
  right:0;
  border: dotted 1px red;
  padding: 10px 0px;
  
  
}

#centered>div{
  border: solid 1px red;
  display:inline-block;
  color:black;
}
<div id="container">
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  
  <div id="centered">
    <div>
      hello world <br/>
      I don't know my width<br/>
      but I'm still absolute!  
    </div>
  </div>

</div>
0
Paweł

これは他の答えの組み合わせであり、私たちのために働きました：

  position: absolute;
  top: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
0
Crashalot
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

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

水平方向と垂直方向にも中央揃えが必要な場合

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
0
jabko87

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

0
amit bende

画像をdivに入れてdiv idを追加し、そのdivのCSSにtext-align:centerを付けることができます。

HTML：

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS：

#intro_img {
    text-align:center;
}
0
Dworvin Vonstrangle

未知の幅のブロックを水平方向に中央揃えするために私にとって簡単な方法がありました。

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

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

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

0
Terence Bandoian