Saya ingin memusatkan secara div
vertikal dengan CSS. Saya tidak ingin tabel atau JavaScript, tetapi hanya CSS murni. Saya menemukan beberapa solusi, tetapi semuanya tidak ada dukungan Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Bagaimana saya bisa memusatkan secara div
vertikal di semua browser utama, termasuk Internet Explorer 6?
css
cross-browser
alignment
vertical-alignment
centering
Burak Erdem
sumber
sumber
tables
tata letak di sini?Jawaban:
Di bawah ini adalah solusi all-around terbaik yang dapat saya buat untuk memusatkan secara vertikal dan horizontal kotak konten tetap dengan lebar tetap dan fleksibel . Itu diuji dan berfungsi untuk versi terbaru dari Firefox, Opera, Chrome, dan Safari.
Lihat Contoh Yang Bekerja Dengan Konten Dinamis
Saya membuat beberapa konten dinamis untuk menguji fleksibilitas dan ingin tahu apakah ada yang melihat masalah dengannya. Ini harus bekerja dengan baik untuk overlay yang berpusat - lightbox, pop-up, dll.
sumber
.outer {position:absolute;width:100%;height:100%}
tidak perlu, mereka ada di sini hanya untuk menunjukkan. Yang kita butuhkan adalahdisplay:table
, kalau ada yang bingung seperti saya..outer
danmiddle
dan jelas mengabaikan.inner
dan gayanya. Saya tidak tahu apa gunanyamargin-left
,margin-right
atur ke otomatis karena itu tidak memusatkan elemen secara horizontal ?? !!!width: 100%;
dan menambahkanmargin: 0 auto
untuk.outer
memungkinkan lebar variabel juga.top: 0; left 0;
tidak ada, setidaknya di Chrome yang menetapkan default ke 1.Satu lagi yang tidak bisa saya lihat di daftar:
height
harus dinyatakan (lihat Tinggi Variabel )overflow: auto
untuk mencegah tumpahan konten (lihat Melimpah)Sumber: Absolute Horizontal Centering Dan Vertikal Dalam CSS
sumber
margin: auto;
Cara paling sederhana adalah 3 baris CSS berikut:
1) posisi: relatif;
2) atas: 50%;
3) transform: translateY (-50%);
Berikut ini adalah CONTOH :
sumber
height
dari luardiv
adalah100%
. Maka hanya bekerja denganposition: absolute;
.-webkit-transform
varian khususnya, yang saya butuhkan untuk membuat metode ini bekerja di phantomjs ... mengakhiri berjam-jam berjuang jadi terima kasih!Sebenarnya Anda membutuhkan dua div untuk pemusatan vertikal. Div yang berisi konten harus memiliki lebar dan tinggi.
Inilah hasilnya
sumber
Sekarang solusi flexbox adalah cara yang sangat mudah untuk browser modern, jadi saya merekomendasikan ini untuk Anda:
sumber
navbar
, Anda dapat mengubah tingginya menggunakanheight: calc(100% - 55px)
atau apa pun ketinggian Andanavbar
.float
. Terima kasih.Edit 2020: hanya gunakan ini jika Anda perlu mendukung browser lama seperti IE8 (yang harus Anda tolak 😉). Jika tidak, gunakan flexbox.
Ini adalah metode paling sederhana yang saya temukan dan saya menggunakannya setiap saat ( jsFiddle demo di sini )
Terima kasih Chris Coyier dari Trik CSS untuk artikel ini .
Dukungan dimulai dengan IE8.
sumber
Setelah banyak penelitian, akhirnya saya menemukan solusi terbaik. Ia bekerja bahkan untuk elemen melayang. Lihat sumber
sumber
50%
bekerja untukku (bukan-50%
)Solusi Flexbox
sumber
justify-content: center
akan memusatkan item secara horizontalUntuk memusatkan div pada halaman, periksa tautan biola .
Pilihan lain adalah dengan menggunakan kotak fleksibel, periksa tautan biola .
Pilihan lain adalah menggunakan transformasi CSS 3:
sumber
%
,em
s danrem
s. Nilai absolut atau tetap adalah piksel atau titik. Yang Anda maksud adalah "ini hanya bekerja dengan tinggi yang dinyatakan". Namun, meskipun metode ini dijelaskan oleh Moes memang membutuhkan tinggi, ketika Anda mendeklarasikannya dalam satuan relatif, persentase adalah yang terbaik, tidak peduli berapa banyak konten di dalam DIV berpusat yang DIV akan memperluas secara vertikal agar sesuai dengan kontennya. Itulah keindahan metode ini. Hal baik lainnya adalah metode ini berfungsi di IE8 / 9/10 jika seseorang masih perlu mendukung browser tersebut.transform: translate(-50%, -50%);
tekniknya. Untuk IE8 saya hanya membiarkannya atas / tengah selaras dan melanjutkan.Solusi termudah di bawah ini:
sumber
Sayangnya - tetapi tidak mengejutkan - solusinya lebih rumit daripada yang diharapkan. Sayangnya, Anda harus menggunakan div tambahan di sekitar div yang Anda inginkan terpusat secara vertikal.
Untuk browser yang memenuhi standar seperti Mozilla, Opera, Safari, dll. Anda perlu mengatur div luar untuk ditampilkan sebagai tabel dan div dalam akan ditampilkan sebagai sel tabel - yang kemudian dapat dipusatkan secara vertikal. Untuk Internet Explorer, Anda perlu memposisikan div dalam benar - benar di dalam div luar dan kemudian tentukan top sebagai 50% . Halaman-halaman berikut menjelaskan teknik ini dengan baik dan memberikan beberapa contoh kode juga:
Pemusatan Vertikal di CSS dengan Tinggi Tidak Diketahui (kompatibel dengan Internet Explorer 7)(tidak ada siaran langsung)Ada juga teknik untuk melakukan pemusatan vertikal menggunakan JavaScript. Perataan vertikal konten dengan JavaScript & CSS menunjukkannya.
sumber
Jika seseorang hanya peduli pada Internet Explorer 10 (dan lebih baru), gunakan
flexbox
:Dukungan Flexbox: http://caniuse.com/flexbox
sumber
align-items: center;
!Cara modern untuk memusatkan elemen secara vertikal adalah menggunakan
flexbox
.Anda membutuhkan orang tua untuk menentukan ketinggian dan anak untuk dipusatkan.
Contoh di bawah ini akan memusatkan div ke pusat di dalam browser Anda. Yang penting (dalam contoh saya) adalah untuk mengatur
height: 100%
untukbody
danhtml
kemudianmin-height: 100%
ke kontainer Anda.sumber
Berpusat hanya secara vertikal
Jika Anda tidak peduli dengan Internet Explorer 6 dan 7, Anda bisa menggunakan teknik yang melibatkan dua wadah.
Wadah luar:
display: table;
Wadah batin:
display: table-cell;
vertical-align: middle;
Kotak konten:
display: inline-block;
Anda dapat menambahkan konten apa pun yang Anda inginkan ke kotak konten tanpa peduli lebar atau tingginya!
Demo:
Lihat juga Fiddle ini !
Pusatkan secara horizontal dan vertikal
Jika Anda ingin memusatkan secara horizontal dan vertikal, Anda juga memerlukan yang berikut ini.
Wadah batin:
text-align: center;
Kotak konten:
text-align: left;
atautext-align: right;
, kecuali jika Anda ingin teks dipusatkanDemo:
Lihat juga Fiddle ini !
sumber
Terkait: Pusatkan Gambar
sumber
Ini selalu ke mana saya pergi ketika saya harus kembali ke masalah ini .
Bagi mereka yang tidak ingin melakukan lompatan:
position:relative
atauposition:absolute
.position:absolute
dantop:50%
pada wadah anak untuk memindahkan bagian atas ke tengah orang tua.Contoh dari ini dalam kode:
sumber
Menggunakan properti fleksibel CSS.
atau dengan menggunakan
display: flex;
danmargin: auto;
Tampilkan cuplikan kode
tampilkan pusat teks
Tampilkan cuplikan kode
Menggunakan persentase (%) tinggi dan lebar.
Tampilkan cuplikan kode
sumber
Saya baru saja menulis CSS ini dan untuk mengetahui lebih lanjut, silakan kunjungi: Artikel ini dengan menyelaraskan vertikal apa saja hanya dengan 3 baris CSS .
sumber
Kotak CSS
sumber
Untuk pendatang baru, silakan coba
sumber
div
.<div style="display:flex"><div style="margin:auto">Inner</div></div>
Jawaban dari Billbad hanya bekerja dengan lebar
.inner
div yang tetap. Solusi ini berfungsi untuk lebar dinamis dengan menambahkan atributtext-align: center
ke.outer
div.sumber
Tiga baris kode menggunakan
transform
karya praktis di browser modern dan Internet Explorer:Saya menambahkan jawaban ini karena saya menemukan beberapa ketidaklengkapan dalam versi sebelumnya dari jawaban ini (dan Stack Overflow tidak akan mengizinkan saya untuk hanya berkomentar).
relatif 'posisi' mengacaukan styling jika div saat ini di dalam tubuh dan tidak memiliki div wadah. Namun 'diperbaiki' tampaknya berfungsi, tetapi jelas memperbaiki konten di tengah viewport
Saya juga menggunakan gaya ini untuk memusatkan beberapa div overlay dan menemukan bahwa di Mozilla semua elemen di dalam div yang diubah ini telah kehilangan batas bawahnya. Mungkin masalah rendering. Tetapi menambahkan padding minimal untuk beberapa dari mereka membuatnya dengan benar. Chrome dan Internet Explorer (secara mengejutkan) memberikan kotak-kotak tanpa perlu bantalan
sumber
Tautan berikut menyajikan cara sederhana untuk melakukannya hanya dengan 3 baris di CSS Anda:
Luruskan apa pun secara vertikal hanya dengan 3 baris CSS .
Saya tahu pertanyaannya sudah ada jawabannya tetapi saya melihat utilitas dalam tautannya karena kesederhanaannya.
sumber
Tidak menjawab kompatibilitas browser tetapi juga menyebutkan Grid baru dan fitur Flexbox yang tidak begitu baru.
Kisi
Dari: Mozilla - Dokumentasi Grid - Align Div Vertically
Dukungan Peramban: Dukungan Peramban Kotak
CSS:
HTML:
Flexbox
Dukungan Browser: Dukungan Browser Flexbox
CSS:
sumber
Saya pikir solusi yang solid untuk semua browser tanpa menggunakan flexbox - "align-items: center;" adalah kombinasi tampilan: tabel dan vertical-align: middle ;.
CSS
HTML
‣Demo: https://jsfiddle.net/6m640rpp/
sumber
Saya melakukannya dengan ini (ubah lebar, tinggi, margin-atas dan margin-kiri sesuai):
sumber
Konten dapat dengan mudah dipusatkan dengan menggunakan flexbox. Kode berikut menunjukkan CSS untuk wadah di mana konten harus dipusatkan:
sumber
Khusus untuk div induk dengan tinggi relatif (tidak diketahui), yang berpusat pada yang tidak diketahui solusi yang bekerja sangat baik untuk saya. Ada beberapa contoh kode yang sangat bagus dalam artikel ini.
Itu diuji di Chrome, Firefox, Opera, dan Internet Explorer.
sumber
Lakukan saja: Tambahkan kelas di Anda
div
:Dan baca artikel ini untuk penjelasan. Catatan:
Height
perlu.sumber
Ada trik yang saya temukan baru-baru ini: Anda harus menggunakan
top 50%
& kemudian Anda melakukantranslateY(-50%)
sumber