Center Align pada Div

93

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div ada di atas, tapi saya tidak bisa memusatkannya dengan <center>ataumargin: 0 auto ;

html css xhtml

— Steve
sumber

152

Masalah Anda mungkin terpecahkan jika Anda memberikan divlebar tetap, sebagai berikut:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

— JacobE
sumber

1

Saya tidak tahu mengapa saya tidak memikirkannya, meskipun kami menggunakan teknik yang sama untuk pemusatan vertikal sepanjang waktu ... Terima kasih, Anda menghemat banyak waktu.

— Aayush

1

bagaimana jika pengguna telah menggulir vertikal ke bawah div muncul di bagian atas halaman sementara itu seharusnya muncul di area yang terlihat

— PUG

Saya menampilkan thumbnail dari gambar yang diubah ukurannya secara dinamis di div overlay saya, jadi saya tidak tahu lebarnya.

— PUG

4

ini hanya solusi, stackoverflow.com/questions/1776915/… tampaknya menjadi solusinya

— PUG

1

Ini bukanlah jawaban yang benar. Jenis media yang berbeda tidak akan mendukung cuplikan ini.

— Sushan

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

— Matheus Oliveira
sumber

3

Bagaimana cara kerjanya? Bisakah Anda menjelaskan mengapa jawaban Anda valid?

— afuzzyllama

1

Saya sangat menyukai metode ini daripada yang lain 99% dari waktu, Anda tidak perlu berurusan dengan padding, border, dll. Saya tidak pernah melihat ini gagal, lain kali berikan contoh jika gagal untuk Anda.

— Dan

1

Hal yang keren tentang solusi ini adalah ia bekerja dengan persen juga, hanya saja tidak yakin apakah itu kompatibel lintas-browser

— maljukan

1

Wow. Saya tidak berharap ini berhasil tetapi itu berhasil bagi saya seperti pesona

— Awais Umar

4

Saya setuju bahwa ini harus menjadi jawaban yang benar, margin -200px menjerit kembali kepada saya.

— Mani5556

36

Saya tahu saya terlambat ke pesta, tetapi saya pikir saya akan memberikan jawaban di sini untuk orang-orang yang perlu memposisikan item absolut secara horizontal, ketika Anda tidak tahu lebarnya secara tepat.

Coba ini:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Teknik yang sama juga dapat diterapkan, saat Anda mungkin membutuhkan perataan vertikal, cukup dengan menyesuaikan properti seperti ini:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

— Michael Giovanni Pumo
sumber

1

Apaa. Ini luar biasa! Bisakah Anda menjelaskan cara kerjanya? Sunting: Melakukan beberapa perburuan dan sepertinya kiri: 50% memindahkan lokasi kiri div ke tengah, yang sebenarnya tidak tengah. Tapi translateX menggesernya kembali 50% dari lebar konten

— Aziz Javed

2

Posisi absolut akan diposisikan dari kiri atas item. Menggunakan terjemahan akan menggesernya ke jumlah yang relatif terhadap ukurannya.

— Michael Giovanni Pumo

3

Michael, hanya ingin Anda tahu, Anda tidak terlambat ke pesta bud ... dan bagi mereka yang tidak tahu: transform: translate (-50%, -50%); melakukan pemusatan vertikal dan horizontal dengan 1 baris

— Marvel Moe

4

Untuk memusatkannya baik secara vertikal maupun horizontal lakukan ini:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

— Armin
sumber

0

Jika Anda perlu memiliki lebar relatif (dalam persentase), Anda dapat menggabungkan div Anda dalam posisi absolut:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Ingatlah bahwa untuk memposisikan elemen secara mutlak, elemen induk harus diposisikan secara relatif.

— dalvallana.dll
sumber

0

Saya mengalami masalah yang sama, dan batasan saya adalah saya tidak dapat memiliki lebar yang telah ditentukan sebelumnya. Jika elemen Anda tidak memiliki lebar tetap, coba ini

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

lalu ubah html Anda agar terlihat seperti ini

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

— Usman Shaukat
sumber

0

Atau Anda dapat menggunakan unit relatif, mis

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

— Aliaksei
sumber

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Luaskan cuplikan

— panwar
sumber

-22

Iya:

div#thing { text-align:center; }

5

Ini akan menyelaraskan konten di dalam div. Ini tidak akan meratakan div di tengah halaman. Ini juga tidak akan menyelaraskan div yang diposisikan secara mutlak dengan cara apa pun selain konten di dalamnya yang merupakan bagian dari alur dokumen.

— CarterMan