「位置：絶対」要素を中央に配置する方法

676

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

html  css  css-position  centering 
— ユーザー1098278
ソース
3
ul＃slideshowに固定幅を与える必要があります...
— ptriek

回答:

1190

幅を設定している場合は、次を使用できます。

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
— バアロズ
ソース
21
これは、他の答えよりもはるかに明確な答えです。注意点はありますか？
— sbichenko 2013年
8
賢い答え。チェックしたところ、すべてのブラウザで動作します。IE8では機能しませんが、IE> = 9では機能します
— Roger
13
IEでテストしてください。要素にIE9で「最大幅」が設定されている場合、このトリックは機能しません
— aphax
33
私は個人的には「マージン：0自動;左：0;右：0;」という構文を好みます。
— Hector Ordonez 2014年
58
幅が設定されていなければ、これはまったく機能しません。親にtext-align：centerがあり、絶対配置された要素に背景がない場合、動作するように見えるかもしれませんが、その上に背景を配置すると、実際には幅いっぱいに表示されます。translateX（-50％）の答えが正しいです。
— Codemonkey 2016年
584

配置された1要素のwidth/ heightがわからなくても、次のように配置することができます。

ここに例

.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以降でサポートされていることは注目に値します。（ベンダーのプレフィックスは簡潔にするために省略されています）

説明

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

これは、top/ leftプロパティのパーセント値が、親要素（包含ブロックを作成している）の高さ/幅に関連しているためです。

変換関数のパーセンテージ値は、要素自体の幅/高さに比例します（実際には、境界ボックスのサイズを指します）。translate()

単方向整列の場合は、translateX(-50%)またはをtranslateY(-50%)使用します。

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

— ハシェム・コラミ
ソース
65
これが一番の答えになるはずです!!
— Chris Pine 14
3
素晴らしい！たくさんの最高！
— Bhargav Ponnapalli 2015年
4
私はこれに対する答えと良い説明を求めてどこでも探しました。これは最高の答えであり、すばらしい説明でもあります。ありがとう。
— マイク
5
水平方向の中央揃え：position: absolute; left: 50%; transform: translateX(-50%);、垂直方向の中央揃え：position: absolute; top: 50%; transform: translateY(-50%);。
— КонстантинВан
1
ちょうど今私はそのtranslateプロパティを見つけました、それ自体のサイズによって要素を翻訳します、その親のサイズに関係なく。
— Farzin Kanzi 2017
185

absoluteCSSで適切に配置されたものを中央に配置することは、かなり複雑です。

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

}

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

— 本棚
ソース
5
これをテストするとき、画像のサイズが異なる場合は機能せず、画像が互いに
— Ryan Gibbons
3
ハックっぽすぎる（ほとんどの場合cssで判明するため）。しかし、すごい！:-)
— Dr.Kameleon、2013
1
他のいくつかの答えの賢さには私は誘惑されましたが、これだけが信頼できました。
— Chris Schiffhauer、2014
私はライアンと同じ問題を抱えていたので、「baaroz」によって提案された2番目の答えを試してみましたが、うまくいきました!!! また、メインのDIVの幅が％ではなくPXであるので、さまざまな解像度もサポートしています
— UID
これは実際には中央揃えではありません。これはより右側に配置されています
— 記事
81

垂直方向と水平方向に揃えられた中央のDiv 

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

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

— セビン・サイモン
ソース
1
なぜこれがより多くの票を投じられないのか私にはわかりません。私の知る限り、モバイルブラウザーを含むすべてのブラウザーで動作します。縫い目はサポートの面でより信頼できます。シンプルで簡単、そしてクリーンです...
— デビッド・マーティンズ
1
これはより良い答えです。divを1つ作成するだけで、left：50％;、 top：50％;を呼び出すよりも多くのユースケースがあります。69票以上のソリューションのように
— Ian S
これまでのベストアンサー、ここに来る人は誰でもそれをチェックする必要があります！
— Abdo Adel、2015
3
この要素が機能するには、要素にもheightセットが必要です。
— alexbooots
55

簡単なCSSトリック、以下を追加してください：

width: 100%;
text-align: center;

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

— かわいい
ソース
48

絶対要素を中央に配置したい場合

#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 */ 
}

これで、私の古い解決策よりも良い答えだと思います。幅と高さを指定する必要がないため。これは、要素自体のコンテンツを適合させます。

— ウェズリー・ブライアン・ラケナル
ソース
36

「position：absolute」要素を中央に配置します。

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
— バダマダファカ
ソース
32

これは私のために働きました：

position: absolute;
left: 50%;
transform: translateX(-50%);
— デプラーク
ソース
27

position：absolute属性を中央に配置するには、divの幅の左：50％とマージン-左：-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はmin-heightを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>
— レッドナ
ソース
16 
    <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;

— モハマド・ダエ
ソース
2
このコードが機能する理由の背後にある種の解説または理論的根拠を提供してください。コードの回答自体は、必ず削除のフラグが付けられます。
— rayryeng 2014年
14

シンプルで最高：

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

次に、次のように、imgタグをスポーツのposition：relativeプロパティを含むタグに挿入する必要があります。

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
— ステファンデルカ
ソース
8

おそらく最短

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
— クリス
ソース
1
これはかなり素晴らしいですが、垂直方向と水平方向の中央に配置するには、マージンを自動のみにする必要があります
— Santosh
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>

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

出典：https : //stackoverflow.com/a/1777282/1136132

— joseantgv
ソース
@ NabiK.AZこの例は、要素の幅がわからない場合に役立ちます。あなたの例では、divに幅を設定します。
— joseantgv
7

または、絶対絶対位置でフレックスボックスを使用できます。 

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
— セバスチャン・トーマス
ソース
これはとても過小評価されています。
— Siege21x
5

ここに画像の説明を入力してください

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

説明

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

— コンスタンチン・カルバゾフ
ソース
5

left: calc(50% - Wpx/2);Wが要素の幅である場所を使用 すると、うまくいきます。

— ジュリックス
ソース
Wをどのように決定しますか？
— パープルジャケット2017年
彼は「画像」と述べました-理想的には、ウェブ用の画像を作成するとき、（大きな画像を作成する場合）不必要な重みを避けるために、（サイズを変更するのではなく）使用するサイズに画像を作成することになっています。小さい）またはあいまい（小さい画像を大きくする場合）。-jQueryを使用していて動的にスタイルを設定する場合は、「imageElement.naturalHeight」と「imageElement.naturalWidth」を使用できますが、少し複雑になります。公平を期すために、他の多くの回答でも、テクニックが機能するために画像の幅を知る必要があります。
— Julix
Wを取得する方法が実際に不明な場合は、ChromeでCTRL + Shift + i（開発者ツール）、次にCTRL + Shift + C（検査モード）を使用して要素にカーソルを合わせ、幅を確認できます。幅を決定して、CSSに「width：Wpx」を追加することもできます。
— Julix
4

リストアイテムが中央に配置されていないため、画像は中央に配置されていません。テキストのみが中央揃えになります。リスト全体を中央に配置するか、リスト内の画像を中央に配置することで、目的の配置を実現できます。

コードの改訂版は下部にあります。私の改訂では、リストとその中の画像の両方を中央に配置します。

真実は、絶対位置に設定されている要素を中央に配置することはできないということです。

しかし、この動作は模倣することができます！

注：これらの手順は、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;
}

そして、あなたはそれを持っています！あなたの画像は中央に配置されます！

あなたのコード：

これを試してください：

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

これがお役に立てば幸いです。幸運を！

— D3RPZ1LLA
ソース
3

相対オブジェクト内の絶対オブジェクトはその親を基準にしています。ここでの問題は、コンテナに静的な幅が必要#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/

— Eveevans
ソース
2つの画像が互いに重なり合うようなフィドル。
— Ryan Gibbons
3

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

— SantoshK
ソース
2

あなたはこの方法を試すことができます：

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

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

あなたが何を成し遂げようとしているのか正確にはわかりません。liをaに設定して、position:relativeそれらを中央に置くのが最善の場合があります。現在のCSSを考える

http://jsfiddle.net/rtgibbons/ejRTU/をチェックして遊んでください。

— ライアン・ギボンズ
ソース
：/最後にあなたとほとんど同じソリューションです... <賛成票
— eveevans
1 
#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のアスペクト比を維持する

— マリアン07
ソース
0

起こっているように見えるのは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テクニックを使用してこの投稿を読むまで、コンテンツの左側にメニューを作成するには、バランスを取るために右側に同じ幅の列を作成する必要がありました。きれいじゃない。ありがとう！

— ディーン・イラクサ
ソース
-1 

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
スニペットを展開

— アンテラブ
ソース
1
この回答にはコードしかありません。それは正しいかもしれませんが、コードがOPの質問に答える理由に関する説明が付随しているはずです。Stack Exchngeのコードは「自己説明」ではありません。
— JBH
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.