web-dev-qa-db-ja.com

"position：absolute"要素をセンタリングする方法

属性positionがabsoluteに設定されている要素を中心に問題があります。画像が中央に配置されていない理由を誰かが知っていますか？

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
htmlcsscss-positioncentering
560
user1098278
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
1003
baaroz

位置指定のwidthheightを知らずに1 要素、それはまだそれを次のように整列させることは可能です：

_ /例ここに

.child {
    position: absolute;
    top: 50%;  /* position the top  Edge of the element at the middle of the parent */
    left: 50%; /* position the left Edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

CSS TransformがIE9以降でサポートされていることは注目に値します 。 （ベンダープレフィックスは簡潔にするために省略）

説明

50%の top / left を追加すると、要素の上/左マージンEdgeが親の中央に移動し、 （translate() 関数に（negative）値が追加されます。 of -50%は、要素をサイズの半分だけ移動します。したがって、要素は中央に配置されます。

これは、 top / left プロパティのパーセンテージ値が、親要素の高さ/幅（包含ブロックを作成している）に対する相対値だからです。

translate()transform 関数のパーセント値は、要素自体の幅/高さ（実際には バウンディングボックス ）の相対的な値です。

単方向アライメントの場合は、代わりにtranslateX(-50%)またはtranslateY(-50%)を使用してください。

1. position以外のstaticを持つ要素。すなわちrelative、absolute、fixedの値.

484
Hashem Qolami

absolutelyに配置されたものを中心に置くことは、CSSではかなり複雑です。

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

margin-leftを、中心に配置しようとしている要素の幅の（負の）半分に変更します。

172
bookcasey

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

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

注：要素には幅と高さを設定する必要があります

76
Sebin Simon

単純なCSSのトリックです。

width: 100%;
text-align: center;

これは画像とテキストの両方で機能します。

48
cutez7boyz

絶対要素を中心に置きたい場合

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

コンテナを左から右に中央揃えにし、上下には揃えたくない場合

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

左右に関係なく、コンテナを上から下に中央揃えにする場合

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

2015年12月15日現在の更新

さて、私は数ヶ月前にこの新しいトリックを学びました。相対的な親要素があるとします。

これがあなたの絶対的な要素です。

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

これで、私はそれが私の古い解決策よりも良い答えだと思います。幅と高さを指定する必要はないので。これは要素自体の内容を適応させます。

42
Wesley Brian Lachenal

位置をセンタリングするには、絶対属性を設定する必要があります。左に設定する必要があります。50％およびmargin-left：divの幅の-50％。

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

垂直中心の絶対のためにあなたはちょうど上で左ではなく同じことを芽する必要があります。 （注：htmlとbodyは、最低身長100％でなければなりません。）

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

そして両方のために結合することができます

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
25
Rednas

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

position: absolute;
left: 50%;
transform: translateX(-50%);
24
Deplake

「position：absolute」要素を中央揃えにします。

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
18
Vadamadafaka
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

上のデモを参照してください： http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; position: absoluteを追加するとき、left: 0; right: 0;要素で動作します

16
Mohammad Dayeh

よりシンプルで最高のもの：

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

次に、次のように、imgタグを位置が相対的なプロパティであるタグに挿入する必要があります。

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
14
Stéphane de Luca

要素の幅がわからない場合は、次のコードを使用できます。

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

フィドルでのデモ： http://jsfiddle.net/wrh7a21r/ /

ソース： https://stackoverflow.com/a/1777282/1136132

7
joseantgv

おそらく最短

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
6
Cris

enter image description here

何を達成したいのかわかりませんが、この場合、width: 100%;をul#slideshow liに追加するだけでうまくいきます。

説明

imgタグはインラインブロック要素です。これは、テキストのようにインラインで流れるが、ブロック要素のような幅と高さも持つことを意味します。あなたのcssには、2つのtext-align: center;ルールが<body>と#slideshowWrapper（冗長である）に適用されているため、すべてのインラインおよびインラインブロックの子要素が最も近い中央に配置されますブロック要素。コードでは、これらはliタグです。すべてのブロック要素は、静的フロー（width: 100%）である場合、position: static;を持ちます。これはデフォルトです。問題は、liタグをposition: absolute;に指定すると、それらを通常の静的フローから除外することです。これにより、サイズが縮小されて内部のコンテンツにちょうど合うようになります。 width: 100%プロパティを「失います」。

5
Konstantin Kalbazov

Wが要素の幅であるleft: calc(50% - Wpx/2);を使うことは私のために働きます。

5
Julix

リスト項目が中央に配置されていないため、画像は中央に配置されていません。テキストだけが中央に配置されています。リスト全体を中央に配置するか、リスト内の画像を中央に配置して配置できます。

コードの改訂版が一番下にあります。私の改訂版では、リストとその中の画像の両方を中心に置いています。

真実はあなたがcannotであることです絶対位置に設定された位置を持つ要素。

しかし、この振る舞いは真似することができます。

注：これらの指示は、imgだけでなく、あらゆるDOMブロック要素で機能します。

  1. あなたの画像をdivまたは他のタグ（あなたの場合はli）で囲みます。

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

    注：これらの要素に付けられた名前は特別なものではありません。

  2. あなたのcssまたはscssを変更してdivの絶対位置と画像の中央を合わせます。

    .absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

そして、あなたはそれを持っています！あなたのimgは中心に置かれるべきです！

あなたのコード：

これを試してみてください。

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

これが参考になったことを願っています。頑張ってください！

4
D3RPZ1LLA

相対オブジェクト内の絶対オブジェクトは、その親からの相対オブジェクトです。ここでの問題は、コンテナ#slideshowWrapperには静的な幅が必要なことです。それ以外の解決策は、他のユーザーが言うようなものです

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

3
eveevans

これが「position：absolute」の中心要素に対する簡単で最良の解決策です。

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
3
SantoshK
#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

上、右、下、左の負の値を使用して、上記のセンタリング方法を見た場所を覚えていません。私にとって、このテクニックは、ほとんどの状況で最高です。

上記の組み合わせを使用すると、画像は次の設定の背景画像のように動作します。

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

最初の例についての詳細はこちらにあります。
CSSでdivの縦横比を維持する

1
Marian07

絶対位置はフローからそれを取り出し、それを親に対して0x0に配置します（絶対位置または相対位置を持つ最後のブロック要素）。

私はあなたが何を達成しようとしているのか正確にはわかりません。liをposition:relativeに設定するのが最善の方法かもしれません。現在のCSSを考える

それを遊ぶために http://jsfiddle.net/rtgibbons/ejRTU/ をチェックしてください

1
Ryan Gibbons

あなたはこのように試すことができます：

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
        <div id="body" class="container-fluid">
          <!--Background-->
            <!--Text-->
                  <div class="text">
                    <p>Random</p>
                  </div>    
        </div>
</body>
</html>
1
Chirag Dave

margin-left: x%;を使用してください。ここで、xは要素の幅の半分です。

0
Bibaswann Bandyopadhyay

起こっているように思われることは2つの解決策があるということです。マージンを使用して中央に配置し、位置を使用して中央に配置します。どちらも問題なく動作しますが、この中央の要素を基準にして要素を絶対位置に配置する場合は、絶対位置方法を使用する必要があります。2番目の要素の絶対位置は、配置される最初の親にデフォルト設定されるためです。そのようです：

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

私がこの投稿を読むまで、margin：0 autoテクニックを使って、私のコンテンツの左側にメニューを作るために、バランスをとるために右側に同じ幅のコラムを作らなければなりませんでした。かわいくないです。ありがとうございます。

0
Deane Nettles