Bagaimana cara memusatkan div secara vertikal untuk semua browser?

1367

Saya ingin memusatkan secara divvertikal 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 divvertikal di semua browser utama, termasuk Internet Explorer 6?

css cross-browser alignment vertical-alignment centering

— Burak Erdem
sumber

25

@MarcoDemaio Tidakkah orang-orang terus-menerus menyukai tablestata letak di sini?

— Chud37

14

@ Chud37: itu tergantung apa yang harus Anda lakukan, tabel untuk tata letak umumnya tidak fleksibel dan panjang untuk mengetikkan kode, dengan css Anda dapat dengan mudah mengubah tata letak 2 cols menjadi tata letak sol 3/4/5 dll. Tetapi dalam kasus ini berbeda, menggunakan lusinan tips dan trik css untuk tugas sederhana yang bisa diselesaikan dengan tabel lintas-browser yang sempurna, itu seperti mencoba masuk ke rumah Anda melalui jendela alih-alih menggunakan pintu.

— Marco Demaio

Dalam kasus orang tidak peduli tentang dukungan browser yang lebih tua: davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com ada beberapa solusi dengan informasi kompatibilitas browser

— EscapeNetscape

2

Berikut ini banyak cara untuk melakukannya css-tricks.com/centering-css-complete-guide

— Michael Yurin

Jawaban:

1374

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.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Luaskan cuplikan

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.

— Billbad
sumber

Tanpa DIV luar "absolut", konten apa pun pada halaman sebelum itu akan mendorong seluruh blok ke bawah. Ini membuatnya lebih independen dari konten halaman lainnya.

— Billbad

9

.outer {position:absolute;width:100%;height:100%}tidak perlu, mereka ada di sini hanya untuk menunjukkan. Yang kita butuhkan adalah display:table, kalau ada yang bingung seperti saya.

— gfaceless

Saya perhatikan bahwa ini membutuhkan 99% untuk menghindari bilah gulir. Lebih penting lagi, ini bekerja hanya dengan dua div pertama, katakan tetap .outerdan middledan jelas mengabaikan .innerdan gayanya. Saya tidak tahu apa gunanya margin-left, margin-rightatur ke otomatis karena itu tidak memusatkan elemen secara horizontal ?? !!!

— user10089632

Menghapus width: 100%;dan menambahkan margin: 0 autountuk .outermemungkinkan lebar variabel juga.

— rococo

@ user10089632 Tidak, ini bukan masalah lebar atau tinggi tetapi posisi. top: 0; left 0;tidak ada, setidaknya di Chrome yang menetapkan default ke 1.

— Michał Woliński

280

Satu lagi yang tidak bisa saya lihat di daftar:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Peramban silang (termasuk Internet Explorer 8 - Internet Explorer 10 tanpa peretasan!)
Responsif dengan persentase dan minimum-
Berpusat terlepas dari bantalan (tanpa ukuran kotak!)
heightharus dinyatakan (lihat Tinggi Variabel )
Pengaturan yang disarankan overflow: autountuk mencegah tumpahan konten (lihat Melimpah)

_{Sumber: Absolute Horizontal Centering Dan Vertikal Dalam CSS}

— Yisela
sumber

7

Ini bekerja untuk saya, tetapi saya perlu memiliki lebar dan tinggi tetap pada chrome untuk beberapa alasan

— Ryan Knell

1

Terima kasih. Saya membutuhkan perbaikan di mana saya tidak perlu menghitung tinggi atau lebar px dan ini bekerja dengan sempurna.

— GFoley83

8

Solusi hebat, terutama karena Anda tidak perlu div induk

— Luca Steeb

1

Ini melakukan peregangan jika ketinggian tidak tetap, selain itu: solusi yang bagus

— Bart Burg

Jika Anda memiliki lebar dan tinggi yang tidak 100%, gunakanmargin: auto;

— Charles L.

253

Cara paling sederhana adalah 3 baris CSS berikut:

1) posisi: relatif;

2) atas: 50%;

3) transform: translateY (-50%);

Berikut ini adalah CONTOH :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Luaskan cuplikan

— DrupalFever
sumber

4

catatan: tidak berfungsi dengan benar jika ketinggian div luar diatur dengan "min-height: 170px"

— Bart Burg

3

Mengganggu indeks-z

— ripper234

4

tidak bekerja ketika heightdari luar divadalah 100%. Maka hanya bekerja dengan position: absolute;.

— Arch Linux Tux

1

Saya telah menemukan solusi ini di tempat lain terlebih dahulu, tetapi pujian ekstra untuk jawaban khusus ini karena menyebutkan -webkit-transformvarian khususnya, yang saya butuhkan untuk membuat metode ini bekerja di phantomjs ... mengakhiri berjam-jam berjuang jadi terima kasih!

— drmrbrewer

2

Ini jawaban terbaik. Ini sangat sederhana, mengacaukan dengan jumlah pekerjaan yang paling sedikit dan fungsi pada segala hal sejauh IE9 yang bahkan tidak ada yang menggunakan lagi. Mari kita beri orang ini upvotes lagi!

— Nick Steele

136

Sebenarnya Anda membutuhkan dua div untuk pemusatan vertikal. Div yang berisi konten harus memiliki lebar dan tinggi.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Luaskan cuplikan

Inilah hasilnya

— Vadim Ovchinnikov
sumber

4

ini adalah trik lama ... 50% teratas dan margin atas negatif setengah tinggi untuk div dalam

— Manatax

34

dengan asumsi Anda memiliki ketinggian tetap untuk div. jangan bekerja ketika div dapat mengubah ketinggian.

— Andre Figueiredo

116

Sekarang solusi flexbox adalah cara yang sangat mudah untuk browser modern, jadi saya merekomendasikan ini untuk Anda:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

Luaskan cuplikan

— Santosh Khalse
sumber

1

Jika Anda punya navbar, Anda dapat mengubah tingginya menggunakan height: calc(100% - 55px)atau apa pun ketinggian Anda navbar.

— Adrian

saya juga harus menghapus margin / bantalan dari tubuh

— Ben

Bekerja dengan baik float. Terima kasih.

— Amir A. Shabani

Harap perhatikan bahwa ini berpotensi berperilaku aneh pada peramban safari seluler "yang lebih baru". Penggunaan yang disarankan sebagai pengganti ketinggian adalah basis-fleksibel pada kelas .container

— Nine Magics

78

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 .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Luaskan cuplikan

Dukungan dimulai dengan IE8.

— Armel Larcier
sumber

Menolak dukungan untuk browser lama, solusi bagi saya bukanlah flexbox tetapi sistem grid. Agak menyebalkan bagi saya untuk memusatkan konten dalam sebuah wadah yang, ketika tingginya terlalu kecil, perlu untuk menampilkan scrollbar, dan konten yang terpusat menghilangkan area gulir dengan semua metode lain. Dalam wadah saya hanya menggunakan: {display: grid; menyelaraskan item: pusat; } Semoga ini bisa membantu seseorang.

— tomasofen

63

Setelah banyak penelitian, akhirnya saya menemukan solusi terbaik. Ia bekerja bahkan untuk elemen melayang. Lihat sumber

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

— ymakux
sumber

4

Ini berfungsi dengan sangat baik, asalkan Anda ingat bahwa elemen penampung harus memiliki ketinggian implisit atau eksplisit; jsfiddle.net/14kt53un Gotcha minor untuk mereka yang relatif baru menggunakan CSS.

— Martyn Shutt

6

Dari semua jawaban, ini yang paling sederhana! Saya harap orang lain melihat jawaban Anda juga! Terima kasih! Ngomong-ngomong, 50%bekerja untukku (bukan -50%)

— The Codesee

Itu luar biasa. Setelah berjam-jam mencari, ini bekerja untuk saya. Saya harus menggunakan translateY (50%) Saya yakin mengapa, tapi berhasil. Dalam kasus saya, orang tua diciptakan oleh AEM Forms Engine, dan saya hanya bisa mengendalikan elemen anak tertentu.

— tarekahf

41

Solusi Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Luaskan cuplikan

— Reggie Pinkham
sumber

3

Note juga justify-content: centerakan memusatkan item secara horizontal

— Peter Berg

36

Untuk memusatkan div pada halaman, periksa tautan biola .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Luaskan cuplikan

Pilihan lain adalah dengan menggunakan kotak fleksibel, periksa tautan biola .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Luaskan cuplikan

Pilihan lain adalah menggunakan transformasi CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Luaskan cuplikan

— Nerdroid
sumber

3

@ ArmelLarcier Itu tidak benar. Satuan relatif adalah persentase %, ems dan rems. 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.

— Ricardo Zea

@ricardozea Saya tidak bermaksud bermain keras kepala tetapi mengatakan div berpusat akan berkembang secara vertikal sementara tetap berpusat vertikal salah. Cobalah. Saya tahu ketika saya mengatakan ketinggian harus "diperbaiki", bahwa itu bukan kata yang tepat. Memang relatif, untuk orang tuanya. Bagaimanapun saya pikir metode Chris Coyer lebih masuk akal, lihat jawaban saya stackoverflow.com/a/21919578/1491212 Ini kompatibel dengan IE8 DAN bekerja pada elemen tanpa dimensi yang ditentukan.

— Armel Larcier

1

@ ArmelLarcier Semuanya baik-baik saja. Bukan salah kakak. Cobalah: codepen.io/shshaw/pen/gEiDt - Tambahkan paragraf ke kotak hijau;]. Memang, ia menggunakan Modernizr untuk mencapai efek, tetapi semuanya itu bisa dilakukan. Saya melihat jawaban Anda dan posting CSS-Tricks.com juga, tetapi metode itu tidak membuat saya bahagia, itu menggunakan markup tambahan dan CSS terlalu bertele-tele. Saya pikir solusi terbaik adalah menggunakan flexbox atau transform: translate(-50%, -50%);tekniknya. Untuk IE8 saya hanya membiarkannya atas / tengah selaras dan melanjutkan.

— Ricardo Zea

1

@ricardozea Yah codepen yang Anda tautkan menggunakan metode "display: table" dan markup tambahan jadi saya tidak terkejut. Pokoknya, beri +1 pada kalimat terakhir Anda.

— Armel Larcier

23

Solusi termudah di bawah ini:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Luaskan cuplikan

— Varsha Dhadge
sumber

2

Memang yang termudah dulu :) Meskipun, saya harus mengatur gaya ke luar-div, bukan tubuh.

— baburao

21

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 dalam CSS
~~Pemusatan Vertikal di CSS dengan Tinggi Tidak Diketahui (kompatibel dengan Internet Explorer 7)~~ (tidak ada siaran langsung)
Pemusatan Vertikal di CSS dengan Tinggi Tidak Diketahui (kompatibel dengan Internet Explorer 7) (Artikel yang diarsipkan dengan Wayback Machine)

Ada juga teknik untuk melakukan pemusatan vertikal menggunakan JavaScript. Perataan vertikal konten dengan JavaScript & CSS menunjukkannya.

— sids
sumber

20

Jika seseorang hanya peduli pada Internet Explorer 10 (dan lebih baru), gunakan flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="parent">
    <div class="centered"></div>
</div>

Luaskan cuplikan

Dukungan Flexbox: http://caniuse.com/flexbox

— bravedick
sumber

Android <4.4 tidak mendukung align-items: center;!

— André Fiedler

Sebenarnya, ia mendukung align-items: center; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Anda mungkin ingin melihat lebih dekat pada tabel itu. Untuk Android <4.4, ini menyatakan "Hanya mendukung spesifikasi flexbox lama dan tidak mendukung pembungkus."

— Nathan Osman

15

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%untuk bodydan htmlkemudian min-height: 100%ke kontainer Anda.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Luaskan cuplikan

— Marwelln
sumber

14

Berpusat hanya secara vertikal

Jika Anda tidak peduli dengan Internet Explorer 6 dan 7, Anda bisa menggunakan teknik yang melibatkan dua wadah.

Wadah luar:

harus punya display: table;

Wadah batin:

harus punya display: table-cell;
harus punya vertical-align: middle;

Kotak konten:

harus punya display: inline-block;

Anda dapat menambahkan konten apa pun yang Anda inginkan ke kotak konten tanpa peduli lebar atau tingginya!

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Luaskan cuplikan

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:

harus punya text-align: center;

Kotak konten:

harus menyesuaikan kembali penyelarasan teks horizontal misalnya text-align: left;atau text-align: right;, kecuali jika Anda ingin teks dipusatkan

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Luaskan cuplikan

Lihat juga Fiddle ini !

— John Slegers
sumber

13

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Luaskan cuplikan

Terkait: Pusatkan Gambar

— antelove
sumber

10

Ini selalu ke mana saya pergi ketika saya harus kembali ke masalah ini .

Bagi mereka yang tidak ingin melakukan lompatan:

Tentukan wadah induk sebagai position:relativeatauposition:absolute .
Tentukan ketinggian tetap pada wadah anak.
Atur position:absolutedan top:50%pada wadah anak untuk memindahkan bagian atas ke tengah orang tua.
Atur margin-top: -yy di mana kamu berada setengah tinggi dari wadah anak untuk mengimbangi item.

Contoh dari ini dalam kode:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

— Ninx
sumber

9

Menggunakan properti fleksibel CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Luaskan cuplikan

atau dengan menggunakan display: flex;danmargin: auto;

Tampilkan cuplikan kode

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Luaskan cuplikan

tampilkan pusat teks

Tampilkan cuplikan kode

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Luaskan cuplikan

Menggunakan persentase (%) tinggi dan lebar.

Tampilkan cuplikan kode

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Luaskan cuplikan

— Deepu Reghunath
sumber

8

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 .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

— Sanjib Debnath
sumber

1

Transformasi CSS dapat menyebabkan distorsi dalam teks dan batas (ketika matematika menghasilkan piksel fraksional).

— Nathan K

5

Kotak CSS

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

Luaskan cuplikan

— Andy Hoffman
sumber

5

Untuk pendatang baru, silakan coba

display: flex;
align-items: center;
justify-content: center;

— Usman I
sumber

1

Harap menambahkan Stack Cuplikan menunjukkan bagaimana kode CSS ini secara vertikal sejalan sebuah div.

— Monyet

ini bekerja juga <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

Saya menemukan penjelasan yang bagus tentang menyelaraskan item dan membenarkan konten. Harus Dibaca: stackoverflow.com/questions/42613359/…

— Usman I

4

Jawaban dari Billbad hanya bekerja dengan lebar .innerdiv yang tetap. Solusi ini berfungsi untuk lebar dinamis dengan menambahkan atribut text-align: centerke .outerdiv.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

Luaskan cuplikan

— Ruwen
sumber

Menarik! Saya menggunakan teknik yang hampir identik! -> stackoverflow.com/questions/396145/…

— John Slegers

4

Tiga baris kode menggunakan transformkarya praktis di browser modern dan Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

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

— MandarK
sumber

3

Tautan berikut menyajikan cara sederhana untuk melakukannya hanya dengan 3 baris di CSS Anda:

Luruskan apa pun secara vertikal hanya dengan 3 baris CSS .

Penghargaan untuk : Sebastian Ekström .

Saya tahu pertanyaannya sudah ada jawabannya tetapi saya melihat utilitas dalam tautannya karena kesederhanaannya.

— Hicaro
sumber

3

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:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Dukungan Browser: Dukungan Browser Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

— ctekk
sumber

3

Saya pikir solusi yang solid untuk semua browser tanpa menggunakan flexbox - "align-items: center;" adalah kombinasi tampilan: tabel dan vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
sumber

2

Saya melakukannya dengan ini (ubah lebar, tinggi, margin-atas dan margin-kiri sesuai):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

— Netuddki
sumber

Itu hanya baik jika Anda tahu lebar / tinggi DIV yang Anda coba pusatkan. Ini bukan pertanyaan yang diajukan

— egr103

2

Konten dapat dengan mudah dipusatkan dengan menggunakan flexbox. Kode berikut menunjukkan CSS untuk wadah di mana konten harus dipusatkan:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

— Mahendra Liya
sumber

2

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.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Luaskan cuplikan

— Ruwen
sumber

2

Lakukan saja: Tambahkan kelas di Anda div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Dan baca artikel ini untuk penjelasan. Catatan: Heightperlu.

— Anshul
sumber

2

Ada trik yang saya temukan baru-baru ini: Anda harus menggunakan top 50%& kemudian Anda melakukantranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Luaskan cuplikan

— Melchia
sumber

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.

Licensed under cc by-sa 3.0 with attribution required.