Flexbox Tidak Memusatkan Secara Vertikal di IE

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

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.

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/

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

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

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

Jawaban asli dari https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

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

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/

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

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/