Cara vertikal pusat div untuk semua browser?

Saya ingin pusat div secara vertikal dengan CSS. Saya don't tabel atau JavaScript, tapi hanya CSS murni. Saya menemukan beberapa solusi, tapi semua dari mereka yang hilang Internet Explorer 6 dukungan.

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

Bagaimana saya bisa center div vertikal di semua browser utama, termasuk Internet Explorer 6?

John Slegers
Pertanyaan edit 1 Mei 2018 в 11:05
Pemrograman
cross-browser css alignment vertical-alignment centering
28 Desember 2008 в 12:57
41 tayangan
Mengomentari pertanyaan (7)
Larutan

Di bawah ini adalah yang terbaik all-around solusi yang saya bisa untuk membangun secara vertikal dan horizontal center fixed-width, fleksibel tinggi isi kotak. Itu diuji dan bekerja 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>

Lihat Contoh Kerja Dengan Konten Dinamis

Saya dibangun dalam beberapa konten dinamis untuk menguji fleksibilitas dan ingin tahu jika ada yang melihat masalah dengan itu. Ini harus bekerja dengan baik untuk berpusat overlay juga -- lightbox, pop-up, dll.

Michał Woliński
Jawaban edit 16 November 2018 в 5:06
Komentar (5)

Satu lagi yang bisa saya't melihat pada 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;
}
  • Cross-browser (seperti Internet Explorer 8 - Internet Explorer 10 tanpa hacks!)
  • Responsif dengan persentase dan min/max-
  • Berpusat terlepas dari bantalan (tanpa box-sizing!)
  • tinggi harus dinyatakan (lihat Variabel Tinggi)
  • Direkomendasikan pengaturan overflow: auto untuk mencegah konten spillover (lihat Overflow)

Sumber: Absolute Centering Horisontal Dan Vertikal Dalam CSS

Komentar (9)

Cara paling sederhana akan menjadi sebagai berikut 3 CSS:

1) position: relative;

2) atas: 50%;

3) mengubah: translateY(-50%);

Berikut 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>
DrupalFever
Jawaban edit 15 Juni 2019 в 9:59
Komentar (7)

Sebenarnya anda memerlukan dua div's untuk centering vertikal. Div 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>

Berikut ini adalah [hasil][1]

Komentar (4)

Sekarang flexbox solusi 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>
Santosh Khalse
Jawaban edit 22 Oktober 2018 в 6:12
Komentar (5)

Ini adalah metode yang paling sederhana yang saya temukan dan saya menggunakannya sepanjang waktu ([demo jsFiddle here][1])

Terima kasih Chris Coyier dari Trik CSS untuk artikel ini.

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
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;
}

Dukungan ini dimulai dengan IE8.

hev1
Jawaban edit 24 Desember 2018 в 11:57
Komentar (0)

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

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

Untuk pusat div pada halaman, [cek biola link][1].

Div untuk menjadi sejajar secara vertikal

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

Pilihan lain adalah dengan menggunakan flex box, [cek biola link][2].

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

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

Pilihan lain adalah dengan menggunakan CSS 3 transform:

Div untuk menjadi sejajar secara vertikal

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;
}
Komentar (4)

Flexbox solusi

Catatan

  1. Elemen induk diberi nama kelas.
  2. Tambahkan flex awalan vendor jika diperlukan oleh anda browser yang didukung.
.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>
Komentar (1)

Sayangnya — tapi tidak mengejutkan — solusi lebih rumit dari satu akan berharap untuk menjadi. Juga sayangnya, anda'll perlu menggunakan tambahan div sekitar div yang anda inginkan di tengah secara vertikal.

Untuk standar-compliant browser seperti Mozilla, Opera, Safari, dll. anda perlu mengatur outer div yang akan ditampilkan sebagai tabel dan dalam div yang akan ditampilkan sebagai table-cell — yang kemudian dapat di tengah secara vertikal. Untuk Internet Explorer, anda perlu posisi batin div benar-benar dalam outer div dan kemudian tentukan top sebagai 50%. Halaman berikut menjelaskan teknik ini dengan baik dan memberikan beberapa kode sampel terlalu:

Ada juga teknik untuk melakukan centering vertikal menggunakan JavaScript. Vertikal keselarasan konten dengan JavaScript & CSS menunjukkan hal itu.

Komentar (0)

Solusi termudah adalah 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>
Varsha Dhadge
Jawaban edit 23 Agustus 2019 в 8:05
Komentar (1)

Jika seseorang peduli untuk Internet Explorer 10 (dan kemudian) saja, 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>

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

Komentar (3)

Cara modern untuk pusat elemen vertikal akan menggunakan flexbox.

Anda memerlukan orang tua untuk menentukan ketinggian dan anak-anak ke pusat.

Contoh di bawah akan pusat div ke pusat dalam browser anda. Apa's penting (dalam contoh saya) adalah untuk mengatur height: 100% ke tubuh dan html dan kemudian min-height: 100% ke wadah.

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>
Komentar (0)

Berpusat hanya secara vertikal

Jika anda don't peduli tentang Internet Explorer 6 dan 7, anda dapat menggunakan teknik yang melibatkan dua kontainer.

Luar wadah:

  • harus memiliki display: tabel;

Dalam wadah:

  • harus memiliki display: table-cell;
  • harus memiliki vertical-align: middle;

Isi kotak:

  • harus memiliki display: inline-block;

Anda dapat menambahkan konten apapun yang anda ingin isi kotak tanpa peduli tentang ukuran lebar atau tinggi!

Demo:

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>
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;
}

Lihat juga [ini Biola][1]!

Berpusat horizontal dan vertikal

Jika anda ingin ke pusat baik secara horizontal maupun secara vertikal, anda juga perlu berikut.

Dalam wadah:

  • harus memiliki text-align: center;

Isi kotak:

  • harus kembali menyesuaikan horizontal text-alignment untuk misalnya text-align: left; atau text-align: right;, kecuali jika anda ingin teks yang akan berpusat

Demo:

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
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;
}

Lihat juga [ini Biola][2]!

Komentar (1)
 
.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;
}  

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

Terkait: Center Image

Komentar (0)

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

Bagi mereka yang don't ingin membuat lompatan:

  1. Tentukan wadah induk sebagai position:relative atau posisi:absolut.
  2. Menentukan tetap tinggi pada anak wadah.
  3. Set posisi:absolut dan top:50% pada anak wadah untuk bergerak ke atas ke bawah ke tengah-tengah orang tua.
  4. Mengatur margin-top:-yy mana yy adalah setengah tinggi anak wadah untuk mengimbangi item.

Contoh dari hal ini dalam kode:


    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}

...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
Komentar (0)

Saya hanya menulis ini CSS dan untuk mengetahui lebih lanjut, silakan pergi melalui: artikel Ini dengan menyelaraskan vertikal apa-apa dengan hanya 3 baris CSS.

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

Menggunakan flex properti 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>

atau dengan menggunakan display: flex; dan margin: auto;

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

menampilkan teks center

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Menggunakan persentase(%) tinggi dan lebar.

.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>
Deepu Reghunath
Jawaban edit 28 Agustus 2019 в 9:21
Komentar (0)

Jawaban dari Billbad hanya bekerja dengan tetap lebar .batin div. Solusi ini bekerja untuk lebar dinamis dengan menambahkan atribut text-align: center untuk .luar div.

.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>
Komentar (1)

Link berikut menyajikan cara yang mudah untuk melakukan hal itu hanya dengan 3 baris di CSS anda:

Menyelaraskan vertikal apa-apa dengan hanya 3 baris CSS.

Kredit: Sebastian Ekström.

Aku tahu pertanyaan sudah menjawab namun aku melihat utilitas pada link untuk kesederhanaan.

Komentar (0)