Pertanyaan Bagaimana cara memusatkan elemen yang diposisikan secara mutlak di div?


Saya perlu menempatkan div (dengan position:absolute;) elemen di tengah jendela saya. Tetapi saya mengalami masalah dalam melakukannya, karena lebar tidak diketahui.

Saya mencoba ini. Tetapi perlu disesuaikan dengan lebar yang responsif.

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

Ada ide?


867
2017-11-21 21:56


asal


Jawaban:


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


1164
2017-11-22 00:21



Ini bekerja untuk saya:

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


1633
2017-11-25 20:07



Solusi Responsif

Ini solusi yang bagus untuk desain responsif atau dimensi yang tidak diketahui secara umum jika Anda tidak perlu mendukung IE8 dan lebih rendah.

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

Berikut ini adalah Fiddle JS

Petunjuknya adalah itu left: 50% relatif terhadap orang tua sementara translate Transformasi relatif terhadap elemen lebar / tinggi.

Dengan cara ini Anda memiliki elemen yang berpusat sempurna, dengan lebar fleksibel pada anak dan orang tua. Bonus: ini berfungsi bahkan jika anak lebih besar dari induknya.

Anda juga dapat memusatkannya secara vertikal dengan ini (dan lagi, lebar dan tinggi orang tua dan anak dapat benar-benar fleksibel (dan / atau tidak diketahui)):

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

Perlu diingat bahwa Anda mungkin membutuhkannya transform vendor juga diawali. Sebagai contoh -webkit-transform: translate(-50%,-50%);


552
2018-04-30 09:54



Posting yang sangat bagus .. Hanya ingin menambahkan jika seseorang ingin melakukannya dengan tag div tunggal maka di sini jalan keluar:

Pengambilan width sebagai 900px.

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

Dalam hal ini kita harus tahu width sebelumnya.


45
2017-08-31 09:56



Pusat Mutlak 

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

Demo: http://jsbin.com/rexuk/2/

Diuji di Google Chrome, Firefox, dan IE8

Semoga ini membantu :)


30
2018-01-30 02:29



ini bekerja untuk vertikal dan horizontal

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

dan jika ingin membuat pusat elemen induk, atur posisi orang tua relatif

 #parentElement{
      position:relative
  }

edit:

  • untuk ketinggian vertikal setel set tinggi ke elemen Anda. terima kasih kepada @Raul

  • jika ingin membuat pusat elemen induk, atur posisi orang tua menjadi relatif


28
2017-12-07 09:26



Mencari solusi, saya mendapat jawaban di atas dan dapat membuat konten terpusat Jawaban Matthias Weiler tetapi menggunakan teks-align.

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

Bekerja dengan chrome dan Firefox.


17
2018-05-29 01:36