680

Saya mengalami masalah saat memusatkan elemen yang atributnya positiondisetel ke absolute. Adakah yang tahu mengapa gambar tidak terpusat?

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>

Luaskan cuplikan

html css css-position centering pengguna1098278
sumber

3

Anda harus memberi ul # slideshow lebar tetap ...

ptriek

1195

Jika Anda telah menetapkan lebar, Anda dapat menggunakan:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

baaroz
sumber

21

Ini adalah jawaban yang jauh lebih bersih daripada yang lain! Apakah ada peringatan?

sbichenko

8

Jawaban cerdas. Saya baru saja memeriksanya dan berfungsi di semua browser. Itu tidak bekerja pada IE8 tetapi bekerja pada IE> = 9

Roger

13

Pastikan untuk menguji di IE, trik ini tidak berfungsi jika elemen memiliki set 'max-width' di IE9

aphax

33

Saya pribadi lebih suka sintaks "margin: 0 auto; left: 0; right: 0;"

Hector Ordonez

58

Ini sama sekali tidak berfungsi, kecuali lebar diatur. Mungkin TAMPAKNYA berfungsi jika Anda memiliki penyelarasan teks: berpusat pada induk dan tidak memiliki latar belakang pada elemen yang diposisikan absolut, tetapi letakkan latar belakang di atasnya dan Anda akan melihatnya benar-benar mengambil lebar penuh. Jawaban translateX (-50%) adalah yang benar.

Codemonkey

586

Tanpa mengetahui width/ heightdari elemen ^{1 yang} diposisikan , masih dimungkinkan untuk menyelaraskannya sebagai berikut:

CONTOH DI SINI

.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%) */
}

Perlu dicatat bahwa CSS Transform didukung di IE9 dan di atas . (Awalan vendor dihilangkan karena singkatnya)

Penjelasan

Menambahkan top/ leftdari 50%bergerak atas / kiri tepi margin elemen ke tengah orangtua, dan translate()fungsi dengan (negatif) nilai -50%bergerak elemen dengan setengah dari ukurannya. Karenanya elemen akan diposisikan di tengah.

Ini karena nilai persentase pada top/ leftproperti relatif terhadap tinggi / lebar elemen induk (yang membuat blok yang mengandung).

Sementara nilai persentase pada fungsi transformasi relatif terhadap lebar / tinggi elemen itu sendiri (Sebenarnya ini mengacu pada ukuran kotak pembatas ) .translate()

Untuk penyejajaran searah, gunakan translateX(-50%)atau translateY(-50%)sebaliknya.

^{1. Unsur dengan positionselain static. Yaitu relative, absolute, fixednilai-nilai.}

Hashem Qolami
sumber

65

Ini harus menjadi jawaban teratas !!

Chris Pine

3

Fantastis! Yang terbaik dari semuanya!

Bhargav Ponnapalli

4

Saya telah mencari di mana-mana untuk jawaban ini dan penjelasan yang bagus. Ini adalah jawaban terbaik di luar sana dan penjelasan yang bagus juga! Terima kasih.

Mike

5

Centering horisontal: position: absolute; left: 50%; transform: translateX(-50%);, centering vertikal: position: absolute; top: 50%; transform: translateY(-50%);.

Константин Ван

1

Baru saja saya menemukan translateproperti itu, menerjemahkan elemen dengan ukurannya sendiri , Tidak peduli ukuran induknya.

Farzin Kanzi

185

Memusatkan sesuatu yang absolutediposisikan agak berbelit dalam CSS.

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

}

Ubah margin-leftke (negatif) setengah lebar elemen yang Anda coba pusatkan.

rak buku
sumber

5

Saat menguji ini tidak berfungsi ketika gambar berukuran berbeda, dan mereka masih saling menumpuk

Ryan Gibbons

3

Terlalu hack-ish (karena hampir selalu ternyata dengan css). Tapi luar biasa! :-)

Dr.Kameleon

1

Saya tergoda oleh kepintaran beberapa jawaban lain, tetapi hanya yang ini yang bisa diandalkan untuk saya.

Chris Schiffhauer

Saya memiliki masalah yang sama seperti Ryan, jadi saya mencoba jawaban kedua yang disarankan oleh "baaroz" dan itu berhasil untuk saya !!! dan juga mendukung resolusi yang berbeda, karena DIV utama saya memiliki lebar dalam% dan bukan PX

UID

Ini sebenarnya tidak terpusat. Ini lebih diposisikan di sebelah kanan

Artsicle

82

Pusat tengah selaras vertikal dan horizontal

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

Catatan: Elemen harus memiliki lebar dan tinggi yang harus ditetapkan

Sebin Simon
sumber

1

Saya tidak tahu mengapa ini tidak mendapatkan suara lebih banyak. Bekerja di semua browser termasuk browser seluler sejauh yang saya tahu. Jahitan lebih dapat diandalkan dalam hal dukungan. Sederhana, mudah dan bersih ...

David Martins

1

Ini jawaban yang lebih baik. Ini hanya membutuhkan satu div untuk membuat dan memiliki lebih banyak kasus penggunaan daripada menelepon ke kiri: 50% ;, atas: 50%; suka solusinya dengan 69+ suara

Ian S

jawaban terbaik sejauh ini, siapa pun yang datang ke sini harus memeriksanya!

Abdo Adel

3

Elemen ini juga membutuhkan heightset agar ini berfungsi.

alexbooots

55

Trik CSS sederhana, cukup tambahkan:

width: 100%;
text-align: center;

Ini berfungsi pada gambar dan teks.

cutez7boyz
sumber

48

Jika Anda ingin memusatkan elemen absolut

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

Jika Anda ingin wadah dipusatkan dari kiri ke kanan, tetapi tidak dengan atas ke bawah

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

Jika Anda ingin wadah dipusatkan ke atas, terlepas dari kiri ke kanan

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

Pembaruan pada 15 Desember 2015

Yah saya belajar trik baru ini beberapa bulan yang lalu. Dengan asumsi bahwa Anda memiliki elemen induk relatif.

Inilah elemen absolut Anda.

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

Dengan ini, saya pikir itu jawaban yang lebih baik daripada solusi lama saya. Karena Anda tidak perlu menentukan lebar DAN tinggi. Yang ini mengadaptasi konten elemen itu sendiri.

Wesley Brian Lachenal
sumber

36

Untuk memusatkan elemen "posisi: absolut".

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

Vadamadafaka
sumber

32

Ini bekerja untuk saya:

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

Deplake
sumber

27

ke tengah posisi aa: atribut absolut yang perlu Anda atur kiri: 50% dan margin-kiri: -50% dari lebar div.

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

untuk vertical center absolute Anda harus melakukan hal yang sama bukan dengan kiri hanya dengan atas. (CATATAN: html dan badan harus memiliki tinggi minimum 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>

dan dapat dikombinasikan untuk keduanya

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

Rednas
sumber

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

lihat demo di: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; bekerja dengan position: absoluteelemen saat menambahkanleft: 0; right: 0;

Mohammad Dayeh
sumber

2

Harap berikan semacam komentar atau alasan di balik mengapa kode ini berfungsi. Jawaban kode itu sendiri pasti akan ditandai untuk dihapus.

rayryeng

14

Sederhana, terbaik:

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

Maka Anda perlu memasukkan tag img Anda ke tag yang menampilkan posisi: properti relatif, sebagai berikut:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

Stéphane de Luca
sumber

8

mungkin yang terpendek

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

Cris
sumber

1

Ini cukup mengagumkan tetapi hanya untuk memusatkan secara vertikal dan horizontal kita perlu membuat margin otomatis saja

Santosh

7

Jika Anda tidak tahu lebar elemen Anda dapat menggunakan kode ini:

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

Demo di fiddle: http://jsfiddle.net/wrh7a21r/

Sumber: https://stackoverflow.com/a/1777282/1136132

joseantgv
sumber

@ NabiK.AZ contoh ini berguna jika Anda tidak tahu lebar elemen. Dalam contoh Anda, Anda menetapkan lebar ke div.

joseantgv

7

Atau Anda sekarang dapat menggunakan kotak fleksibel dengan posisi absolut:

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

.child {
    position: absolute;
}

Sebastian Thomas
sumber

ini sangat diremehkan.

Siege21x

5

Saya tidak yakin apa yang ingin Anda capai, tetapi dalam hal ini hanya menambah kehendak width: 100%;Anda ul#slideshow limelakukan trik.

Penjelasan

The imgtag adalah elemen inline-block. Ini berarti bahwa mereka mengalir inline seperti teks, tetapi juga memiliki lebar dan tinggi seperti elemen blok. Di css Anda ada dua text-align: center;aturan yang diterapkan pada <body>dan ke #slideshowWrapper(yang btw redundan) ini membuat semua elemen anak inline dan inline-blok menjadi terpusat di elemen blok terdekat mereka, dalam kode Anda ini adalah litag. Semua elemen blok memiliki width: 100%jika mereka adalah aliran statis ( position: static;), yang merupakan default. Masalahnya adalah ketika Anda memberi tahu litag untuk menjadi position: absolute;, Anda mengeluarkannya dari aliran statis normal, dan ini menyebabkan mereka mengecilkan ukurannya agar pas dengan konten dalamnya, dengan kata lain mereka semacam "kehilangan" width: 100%properti mereka .

Konstantine Kalbazov
sumber

5

Menggunakan left: calc(50% - Wpx/2);dimana W adalah lebar elemen bekerja untuk saya.

Julix
sumber

Bagaimana Anda menentukan W?

Purplejacket

Dia mengatakan "sebuah gambar" - idealnya saat melakukan gambar untuk web Anda seharusnya membuat gambar dalam ukuran yang akan Anda gunakan (daripada mengubah ukurannya) untuk menghindari bobot yang tidak perlu (jika Anda membuat gambar besar kecil) atau ketidakjelasan (jika Anda membuat gambar kecil menjadi besar). - Anda dapat menggunakan "imageElement.naturalHeight" dan "imageElement.naturalWidth" jika Anda menggunakan jQuery dan kemudian gaya secara dinamis juga, tapi itu semakin rumit. Agar adil, banyak jawaban lain juga mengharuskan Anda untuk mengetahui lebar gambar agar teknik mereka berfungsi.

Julix

jika Anda sebenarnya tidak jelas tentang cara mendapatkan W, di Chrome Anda dapat menggunakan CTRL + Shift + i (alat pengembang), lalu CTRL + Shift + C (mode inspeksi) untuk mengarahkan kursor ke elemen-elemen dan melihat seberapa luasnya. Anda juga dapat memutuskan seberapa lebar Anda inginkan dan menambahkan "width: Wpx" ke css Anda.

Julix

4

Gambar Anda tidak terpusat karena item daftar Anda tidak terpusat; hanya teks mereka yang berada di tengah. Anda dapat mencapai posisi yang diinginkan dengan memusatkan seluruh daftar atau memusatkan gambar di dalam daftar.

Versi revisi kode Anda dapat ditemukan di bagian bawah. Dalam revisi saya, saya memusatkan daftar dan gambar di dalamnya.

Yang benar adalah Anda tidak dapat memusatkan elemen yang memiliki posisi disetel ke absolut.

Tapi perilaku ini bisa ditiru!

Catatan: Instruksi ini akan bekerja dengan elemen blok DOM, bukan hanya img.

Kelilingi gambar Anda dengan div atau tag lain (dalam kasus Anda, li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Catatan: Nama yang diberikan untuk elemen-elemen ini tidak istimewa.

Ubah css atau scss Anda untuk memberikan posisi absolut div dan gambar Anda terpusat.

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

Dan begitulah! Img Anda harus berada di tengah!

Kode Anda:

Coba ini:

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>

Luaskan cuplikan

Saya harap ini membantu. Semoga berhasil!

D3RPZ1LLA
sumber

3

Objek absolut di dalam objek relatif relatif terhadap induknya, masalahnya di sini adalah bahwa Anda memerlukan lebar statis untuk wadah #slideshowWrapper, dan sisanya dari solusinya adalah seperti kata pengguna lain

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
sumber

Biola Anda sebagai dua gambar menumpuk satu sama lain.

Ryan Gibbons

3

Berikut ini adalah solusi mudah dan terbaik untuk elemen tengah dengan "posisi: absolut"

 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>

Luaskan cuplikan

SantoshK
sumber

2

Anda dapat mencoba cara ini:

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

Luaskan cuplikan

Chirag Dave
sumber

1

Posisi absolut mengeluarkannya dari aliran, dan menempatkannya pada 0x0 ke induknya (Elemen blok terakhir memiliki posisi absolut atau posisi relatif).

Saya tidak yakin apa sebenarnya yang Anda coba capai, Mungkin yang terbaik adalah mengatur li menjadi position:relativedan yang akan memusatkan mereka. Mengingat CSS Anda saat ini

Lihat http://jsfiddle.net/rtgibbons/ejRTU/ untuk bermain dengannya

Ryan Gibbons
sumber

: / pada akhirnya adalah solusi yang hampir sama dengan Anda ... <Up vote

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

Saya tidak ingat di mana saya melihat metode pemusatan yang tercantum di atas, menggunakan nilai negatif atas, kanan, bawah, kiri. Bagi saya, teknik ini adalah yang terbaik, dalam banyak situasi.

Ketika saya menggunakan kombinasi dari atas, gambar berperilaku seperti gambar latar dengan pengaturan berikut:

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

Rincian lebih lanjut tentang contoh pertama dapat ditemukan di sini:
Pertahankan rasio aspek div dengan CSS

Marian07
sumber

0

Apa yang tampaknya terjadi adalah ada dua solusi; terpusat menggunakan margin dan terpusat menggunakan posisi. Keduanya berfungsi dengan baik, tetapi jika Anda ingin memposisikan absolut suatu elemen relatif terhadap elemen terpusat ini, Anda perlu menggunakan metode posisi absolut, karena posisi absolut dari elemen kedua default ke induk pertama yang diposisikan. Seperti itu:

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

Sampai saya membaca posting ini, menggunakan teknik margin: 0 auto, untuk membangun menu di sebelah kiri konten saya, saya harus membuat kolom dengan lebar yang sama di sebelah kanan untuk menyeimbangkannya. Tidak cantik. Terima kasih!

Deane Nettles
sumber

0

Gunakan di margin-left: x%;mana x adalah setengah dari lebar elemen.

Bibaswann Bandyopadhyay
sumber

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

Luaskan cuplikan

antelove
sumber

1

Jawaban ini hanya memiliki kode. Meskipun mungkin benar, itu harus memiliki penjelasan yang menyertai mengapa kode menjawab pertanyaan OP. Kode bukan "penjelasan sendiri" di Stack Exchnge.

JBH

Cara memusatkan elemen "posisi: absolut"

Jawaban:

Penjelasan

Penjelasan

Tapi perilaku ini bisa ditiru!

Dan begitulah! Img Anda harus berada di tengah!

Kode Anda: