Flexbox Tidak Memusatkan Secara Vertikal di IE

116

Saya memiliki halaman web sederhana dengan beberapa konten Lipsum yang berada di tengah halaman. Halaman ini berfungsi dengan baik di Chrome dan Firefox. Jika saya mengurangi ukuran jendela, konten mengisi jendela sampai tidak bisa dan kemudian menambahkan bilah gulir dan mengisi konten dari layar, ke arah bawah.

Namun, halaman tersebut tidak berada di tengah IE11. Saya bisa mendapatkan halaman ke tengah di IE dengan meregangkan tubuh, tetapi jika saya melakukannya, maka konten mulai keluar dari layar ke arah atas dan memotong bagian atas konten.

Di bawah ini adalah dua skenario. Lihat Fiddles terkait. Jika masalah tidak langsung terlihat, kurangi ukuran jendela hasil sehingga dipaksa untuk membuat bilah gulir.

Catatan: Aplikasi ini hanya menargetkan versi terbaru Firefox, Chrome dan IE (IE11), yang semuanya memiliki dukungan untuk Rekomendasi Kandidat Flexbox , jadi kompatibilitas fitur seharusnya tidak menjadi masalah (secara teori).

Edit : Saat menggunakan API Layar Penuh untuk menampilkan div luar layar penuh, semua browser berada di tengah dengan benar menggunakan CSS asli. Namun, setelah keluar dari mode layar penuh, IE kembali ke tengah horizontal dan rata atas secara vertikal.

Sunting : IE11 menggunakan implementasi khusus non-vendor dari Flexbox. Pembaruan tata letak kotak fleksibel ("Flexbox")


Menengahkan dan Mengubah Ukuran dengan Benar di Chrome / FF, Tidak Menengahkan Tetapi Mengubah Ukuran dengan Benar di IE11

Biola: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Pusat dengan Benar di Mana Saja, Memotong Bagian Atas Saat Ukurannya Bawah

Biola: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}
Dragonseer
sumber
Saya tidak memiliki akses ke IE11 saat ini, apakah Anda sudah mencoba solusi ini: stackoverflow.com/questions/16122341/… ?
cimmanon
margin: otomatis tampaknya tidak membuat perbedaan.
Dragonseer
Tolong laporkan bug Microsoft setidaknya mereka akan memiliki satu bug lebih sedikit dalam rilis resmi, seperti biasa IE akan memiliki sesuatu (banyak bug unik) untuk ditangani ..
MarmiK
Anda perlu menggunakan -ms-flexboxuntuk IE ..
avrahamcool
IE11 menggunakan standar tampilan Flexbox saat ini: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Saya tetap mencobanya dan tidak ada bedanya; kontennya masih di atas. Juga, harap perhatikan hasil edit saya dalam pertanyaan asli yang menyatakan bahwa div luar berada di tengah dengan benar saat layar penuh tetapi sejajar atas saat keluar dari layar penuh.
Dragonseer

Jawaban:

225

Saya menemukan bahwa browser memiliki masalah untuk menyelaraskan secara vertikal wadah dalam, ketika hanya gaya min-height yang disetel atau ketika gaya ketinggian hilang sama sekali. Apa yang saya lakukan adalah menambahkan gaya ketinggian dengan beberapa nilai dan itu memperbaiki masalah bagi saya.

sebagai contoh :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Jadi sekarang kita memiliki gaya tinggi, tetapi min-height akan menimpanya. Dengan cara itu yaitu senang dan kita masih bisa menggunakan min-height.

Semoga ini bermanfaat bagi seseorang.

Kaloyan Stamatov
sumber
9
Jangan lupa -ms-flex-align:center;untuk IE10. Dukungan untuk align-itemsditambahkan hanya di IE11 .
Boaz
Ah! berbulan-bulan kemudian ini menyelamatkan saya - menetapkan ketinggian alih-alih tinggi minimum berhasil.
Pete
@KaloyanStamatov Lihat autopfixer dan bantu Anda bebas dari masalah lintas browser yang mengganggu ini.
hitautodestruct
29
Solusi ini tidak berfungsi saat konten lebih besar dari tinggi min. Itu min-heightmemang menimpa heightaturan, tetapi jika konten melebihi min-heightitu hanya akan melampaui batas. The jawaban dengan @ericodes memecahkan masalah ini dan solusi bekerja pada semua browser yang mendukung fleksibel.
lachie_h
2
Bagi siapa pun yang datang ke sini pada atau setelah 2019, solusi terbaik sejauh ini adalah solusi dari @ sergey-fedirko yang tidak memerlukan elemen HTML tambahan dan tidak ada hard heights;) Yang ini: stackoverflow.com/a/54796082/134120
AsGoodAsItGets
71

Coba gabungkan div apa pun yang Anda gunakan untuk flexboxed flex-direction: columndalam wadah yang juga flexboxed.

Saya baru saja menguji ini di IE11 dan berhasil. Perbaikan yang aneh, tetapi sampai Microsoft membuat perbaikan bug internal mereka secara eksternal ... itu harus dilakukan!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 contoh untuk Anda uji di IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

ericodes
sumber
1
Anda harus memposting kode yang Anda gunakan untuk memperbaiki masalah dalam jawaban Anda yang sebenarnya, daripada menautkan ke URL eksternal. Maka jawaban Anda akan terus berguna, bahkan setelah tautannya mati.
Kelly Keller-Heikkila
11
Sejauh ini, inilah solusi terbaik untuk bug ini. Semua jawaban lain menyarankan ketinggian tetap pada wadah, yang tidak berfungsi jika konten memiliki tinggi variabel. Solusi ini memungkinkan penggunaan min-heightalih - alih heightaturan keras , sambil tetap memusatkan secara vertikal pada semua browser yang mendukung penggunaan display: flex.
lachie_h
1
Just display:flexdiperlukan pada pembungkusnya, dan mungkin salah satunya pada anak: width: 100% flex-basis:100% flex-grow:1tergantung pada konten / gaya Anda.
fregante
solusi ini tidak berfungsi jika properti FlexContainerWrapper align-itemsdisetel. Anda harus membungkus flexbox asli dengan flexbox tanpa properti ini.
Marcus Krahl
hai @ MarcusKrahl! maksud Anda membungkus flexbox asli (FlexContainer) dengan flexbox tanpa align-itemsproperti (FlexContainerWrapper)?
mengikis
10

Inilah solusi kerja saya (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
Sergey Fedirko
sumber
6

Untuk berjaga-jaga jika seseorang sampai di sini dengan masalah yang sama dengan yang saya alami, yang tidak secara khusus dibahas dalam komentar sebelumnya.

Saya memiliki margin: autoelemen dalam yang menyebabkannya menempel ke bagian bawah induknya (atau elemen luar). Yang memperbaikinya bagi saya adalah mengubah margin menjadi margin: 0 auto;.

Gal Talmor
sumber
5

Ini adalah bug yang diketahui yang tampaknya telah diperbaiki secara internal di Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

David Zulaica
sumber
43
Ini tampaknya belum diperbaiki secara eksternal.
Blazemonger
4
"Masalah ini tampaknya telah diperbaiki di Microsoft Edge. Saat ini kami tidak sedang menangani bug fitur di Internet Explorer di luar masalah terkait keamanan." Mereka telah menutup masalah untuk versi IE sebelum Edge
David Zulaica
1
Solusi tampaknya menggunakan tinggi bukan tinggi min, jika Anda bisa.
frodo2975
3

saya telah memperbarui kedua biola. Saya berharap ini akan membuat pekerjaan Anda selesai.

keterpusatan

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

pusat dan gulir

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }
Umar Khan
sumber
Terima kasih atas masukan Anda. Sayangnya, Fiddles Anda tampaknya tidak berfungsi di Chrome atau IE11. Contoh pemusatan tidak lagi berpusat di Chrome dan contoh tengah dan gulir tidak berpusat di IE11 dan masih memotong konten.
Dragonseer
1

Saya tidak memiliki banyak pengalaman Flexboxtetapi menurut saya ketinggian yang dipaksakan pada tag htmldan bodymenyebabkan teks menghilang di atas ketika diubah ukurannya - Saya tidak dapat menguji di IE tetapi saya menemukan efek yang sama di Chrome.

Aku memotong biolamu dan menghapus deklarasi heightdan width.

body
{
    margin: 0;
}

Sepertinya flexpengaturan tersebut juga harus diterapkan pada flexelemen lain . Namun, menerapkan display: flexke .innermasalah yang disebabkan jadi saya secara eksplisit mengatur .innerke display: blockdan mengatur .outerke flexuntuk pemosisian.

Saya mengatur .outerketinggian minimum untuk mengisi viewport display: flex, dan mengatur perataan horizontal dan vertikal:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Aku mengatur .inneruntuk display: blocksecara eksplisit. Di Chrome, sepertinya ini diwarisi flexdari .outer. Saya juga mengatur lebarnya:

.inner
{
    display:block;
    width: 80%;
}

Ini memperbaiki masalah di Chrome, semoga itu mungkin melakukan hal yang sama di IE11. Ini biola versi saya: http://jsfiddle.net/ToddT/5CxAy/21/

Todd
sumber
Terima kasih untuk balasan Anda. Deklarasi tinggi dan lebar diperlukan untuk memusatkan vertikal di IE. Tanpanya, konten tidak lagi berpusat di IE11.
Dragonseer
Bahkan dengan ketinggian yang disetel di div luar? Mungkin menambahkan min-height ke tubuh?
Todd
1

Menemukan solusi yang baik apa yang berhasil untuk saya, periksa tautan ini https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Pertama, kami menambahkan div induk, kedua kami mengubah min-height: 100% menjadi min- tinggi: 100vh. Ini bekerja seperti pesona.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  
Avirtum
sumber
0

Jika Anda dapat menentukan lebar dan tinggi induk, ada cara yang lebih sederhana untuk memusatkan gambar tanpa harus membuat wadah untuk itu.

Untuk beberapa alasan, jika Anda menentukan min-width, IE akan mengenali max-width juga.

Solusi ini berfungsi untuk IE10 +, Firefox dan Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

Humberto Mendes
sumber