Flexbox không căn giữa theo chiều dọc trong IE

Tôi có một trang web đơn giản với một số nội dung Lipsum được căn giữa trang. Trang hoạt động tốt trong Chrome và Firefox. Nếu tôi giảm kích thước của cửa sổ, nội dung sẽ lấp đầy cửa sổ cho đến khi không thể, sau đó thêm thanh cuộn và lấp đầy nội dung ngoài màn hình, về phía dưới cùng.

Tuy nhiên, trang không nằm giữa IE11. Tôi có thể đưa trang vào giữa trong IE bằng cách uốn cong phần thân, nhưng nếu tôi làm vậy, thì nội dung bắt đầu rời khỏi màn hình về phía trên cùng và cắt khỏi phần trên cùng của nội dung.

Dưới đây là hai kịch bản. Xem Fiddles liên quan. Nếu vấn đề không rõ ràng ngay lập tức, hãy giảm kích thước của cửa sổ kết quả để nó buộc phải tạo một thanh cuộn.

Lưu ý: Ứng dụng này chỉ nhắm mục tiêu đến các phiên bản mới nhất của Firefox, Chrome và IE (IE11), tất cả đều có hỗ trợ cho Đề xuất ứng viên của Flexbox , vì vậy tính tương thích không phải là một vấn đề (trên lý thuyết).

Chỉnh sửa : Khi sử dụng API toàn màn hình để hiển thị toàn màn hình div bên ngoài, tất cả các trình duyệt căn giữa chính xác bằng cách sử dụng CSS gốc. Tuy nhiên, khi rời khỏi chế độ toàn màn hình, IE sẽ quay trở lại căn giữa theo chiều ngang và căn trên theo chiều dọc.

Chỉnh sửa : IE11 sử dụng triển khai Flexbox cụ thể không phải của nhà cung cấp. Cập nhật bố cục hộp linh hoạt ("Flexbox")

Trung tâm và thay đổi kích thước chính xác trong Chrome / FF, không trung tâm nhưng thay đổi kích thước chính xác trong IE11

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

Trung tâm chính xác ở mọi nơi, tắt ở trên cùng khi giảm kích thước

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

Tôi thấy rằng trình duyệt tức là có vấn đề trong việc căn chỉnh theo chiều dọc các vùng chứa bên trong, khi chỉ có kiểu chiều cao tối thiểu được đặt hoặc khi kiểu chiều cao bị thiếu. Những gì tôi đã làm là thêm kiểu chiều cao với một số giá trị và điều đó giải quyết vấn đề cho tôi.

ví dụ :

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

Vì vậy, bây giờ chúng ta có kiểu chiều cao, nhưng chiều cao tối thiểu sẽ ghi đè lên nó. Bằng cách đó, tức là rất vui và chúng ta vẫn có thể sử dụng chiều cao tối thiểu.

Hy vọng điều này sẽ hữu ích cho ai đó.

Hãy thử gói bất kỳ div nào bạn đã flexbox flex-direction: columntrong một hộp đựng cũng được flexbox.

Tôi vừa thử nghiệm điều này trong IE11 và nó hoạt động. Một bản sửa lỗi kỳ lạ, nhưng cho đến khi Microsoft thực hiện sửa lỗi nội bộ của họ bên ngoài ... thì việc đó sẽ phải làm!

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 ví dụ để bạn kiểm tra trong IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Đây là giải pháp làm việc của tôi (SCSS):

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

Đề phòng trường hợp ai đó đến đây với cùng một vấn đề mà tôi đã gặp phải, vấn đề này không được giải quyết cụ thể trong các bình luận trước.

Tôi đã có margin: autophần tử bên trong khiến nó dính vào phần dưới cùng của phần tử gốc (hoặc phần tử bên ngoài). Điều đã sửa nó cho tôi là thay đổi lề thành margin: 0 auto;.

Đây là một lỗi đã biết dường như đã được sửa nội bộ tại Microsoft.

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

Câu trả lời gốc từ 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;
}

tôi đã cập nhật cả hai fiddles. tôi hy vọng nó sẽ làm cho công việc của bạn được hoàn thành.

định tâm

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

trung tâm và cuộn

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

Tôi không có nhiều kinh nghiệm Flexboxnhưng dường như đối với tôi rằng chiều cao bắt buộc trên htmlvàbody thẻ khiến văn bản biến mất ở trên cùng khi thay đổi kích thước - Tôi không thể kiểm tra trong IE nhưng tôi thấy tác dụng tương tự trong Chrome.

Tôi đã bẻ khóa của bạn và loại bỏ các khai báo heightvà width.

body
{
    margin: 0;
}

Có vẻ như các flexcài đặt phải được áp dụng cho các flexphần tử khác . Tuy nhiên, áp dụng display: flexcho .innercác vấn đề gây ra vì vậy tôi dứt khoát thiết lập .innerđể display: blockvà thiết lập .outerđể flexcho việc định vị.

Tôi đặt .outerchiều cao tối thiểu để lấp đầy khung nhìn display: flex, và đặt căn chỉnh theo chiều ngang và dọc:

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

Tôi đặt .innerthành display: blockrõ ràng. Trong Chrome, có vẻ như nó được kế thừa flextừ .outer. Tôi cũng đặt chiều rộng:

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

Điều này đã khắc phục sự cố trong Chrome, hy vọng nó có thể hoạt động tương tự trong IE11. Đây là phiên bản fiddle của tôi: http://jsfiddle.net/ToddT/5CxAy/21/

Đã tìm thấy một giải pháp tốt phù hợp với tôi, hãy kiểm tra liên kết này https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Đầu tiên, chúng tôi thêm div cha, thứ hai, chúng tôi thay đổi min-height: 100% thành min- chiều cao: 100vh. Nó hoạt động như một say mê.

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

Nếu bạn có thể xác định chiều rộng và chiều cao của hình ảnh gốc, có một cách đơn giản hơn để tập trung hình ảnh mà không cần phải tạo vùng chứa cho nó.

Vì một số lý do, nếu bạn xác định chiều rộng tối thiểu, IE cũng sẽ nhận ra chiều rộng tối đa.

Giải pháp này hoạt động cho IE10 +, Firefox và 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/