Pertanyaan Bagaimana secara vertikal memusatkan div untuk semua browser?


Saya ingin memusatkan a div secara vertikal dengan CSS. Saya tidak ingin tabel atau JavaScript, tetapi hanya CSS murni. Saya menemukan beberapa solusi, tetapi semuanya kehilangan dukungan Internet Explorer 6.

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

Bagaimana saya bisa memusatkan a div secara vertikal di semua browser utama, termasuk Internet Explorer 6?


1097
2017-12-28 12:57


asal


Jawaban:


Di bawah ini adalah solusi terbaik yang bisa saya bangun untuk secara vertikal dan horizontal memusatkan lebar tetap, ketinggian fleksibel kotak konten. Ini diuji dan berfungsi untuk versi terbaru Firefox, Opera, Chrome, dan Safari.

.outer {
  display: table;
  position: absolute;
  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 membangun beberapa konten dinamis untuk menguji fleksibilitas dan ingin tahu apakah ada yang melihat masalah dengan itu. Ini seharusnya bekerja dengan baik untuk hamparan terpusat juga - lightbox, pop-up, dll.


1133
2018-05-31 03:13



Satu lagi saya tidak bisa 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;
}
  • Cross-browser (termasuk Internet Explorer 8 - Internet Explorer 10 tanpa peretasan!)
  • Responsif dengan persentase dan min- / max-
  • Dipusat tanpa menghiraukan padding (tanpa ukuran kotak!)
  • height harus dinyatakan (lihat Tinggi Variabel)
  • Pengaturan yang direkomendasikan overflow: auto untuk mencegah spillover konten (lihat Overflow)

Sumber: Pemetaan Horisontal dan Vertikal Mutlak Dalam CSS


244
2017-08-13 03:08



Cara paling sederhana adalah sebagai berikut 3 baris CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

Berikut ini adalah contohnya:

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>


163
2017-12-17 18:30



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>

Ini dia hasil


126
2017-12-28 15:15



Ini adalah metode paling sederhana yang saya temukan dan saya menggunakannya sepanjang waktu (demo jsFiddle di sini)

Terima Chris Coyier dari CSS Tricks for artikel ini.

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

Dukungan dimulai dengan IE8.


73
2018-02-20 21:05



Setelah banyak penelitian akhirnya saya menemukan solusi pamungkas. Ia bekerja bahkan untuk elemen mengambang. Lihat sumber 

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

49
2018-05-19 12:04



Untuk memusatkan div pada halaman, periksa tautan fiddle.

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

Pilihan lainnya adalah menggunakan flex box, periksa tautan fiddle.

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

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


31
2017-08-13 04:06



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

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


30
2017-12-15 13:08



Solusi Flexbox

Catatan
1. Elemen induk diberi nama kelas.
2. Tambahkan prefiks vendor fleksibel jika diperlukan oleh Anda peramban yang didukung.

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


24
2018-03-30 01:30



Sayangnya - tetapi tidak mengherankan - solusinya lebih rumit dari yang diharapkan. Sayangnya, Anda harus menggunakan div tambahan di sekitar div yang ingin Anda pusatkan secara vertikal.

Untuk browser yang sesuai standar seperti Mozilla, Opera, Safari, dll. Anda perlu mengatur div luar agar ditampilkan sebagai meja dan div batin ditampilkan sebagai sel-meja - yang kemudian dapat secara vertikal terpusat. Untuk Internet Explorer, Anda perlu posisi div batin benar dalam div luar dan kemudian tentukan puncaksebagai 50%. Halaman berikut menjelaskan teknik ini dengan baik dan memberikan beberapa contoh kode juga:

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


20
2018-05-15 15:25



Jika seseorang hanya memperdulikan Internet Explorer 10 (dan kemudian), 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>

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


20
2017-10-20 13:37