Flexbox ไม่อยู่ตรงกลางในแนวตั้งใน IE

ฉันมีหน้าเว็บง่ายๆที่มีเนื้อหา Lipsum ซึ่งอยู่กึ่งกลางของหน้า หน้านี้ทำงานได้ดีใน Chrome และ Firefox หากฉันลดขนาดของหน้าต่างเนื้อหาจะเต็มหน้าต่างจนกว่าจะไม่สามารถเพิ่มแถบเลื่อนและเติมเนื้อหาออกจากหน้าจอไปทางด้านล่าง

อย่างไรก็ตามเพจไม่ได้อยู่กึ่งกลางใน IE11 ฉันสามารถทำให้หน้าอยู่ตรงกลางใน IE ได้โดยการงอร่างกาย แต่ถ้าทำเช่นนั้นเนื้อหาจะเริ่มออกจากหน้าจอไปทางด้านบนและตัดส่วนบนของเนื้อหาออก

ด้านล่างนี้คือสองสถานการณ์ ดู Fiddles ที่เกี่ยวข้อง หากปัญหายังไม่ชัดเจนให้ลดขนาดของหน้าต่างผลลัพธ์เพื่อบังคับให้สร้างแถบเลื่อน

หมายเหตุ: แอปพลิเคชันนี้กำหนดเป้าหมายเฉพาะ Firefox, Chrome และ IE (IE11) เวอร์ชันล่าสุดซึ่งทั้งหมดนี้รองรับคำแนะนำของผู้สมัคร Flexboxดังนั้นความเข้ากันได้ของคุณลักษณะจึงไม่ควรเป็นปัญหา (ในทางทฤษฎี)

แก้ไข : เมื่อใช้ Fullscreen API เพื่อแสดง div ด้านนอกแบบเต็มหน้าจอเบราว์เซอร์ทั้งหมดจะอยู่ตรงกลางอย่างถูกต้องโดยใช้ CSS ดั้งเดิม อย่างไรก็ตามเมื่อออกจากโหมดเต็มหน้าจอ IE จะเปลี่ยนกลับไปอยู่ตรงกลางในแนวนอนและแนวตั้งด้านบน

แก้ไข : IE11 ใช้การใช้ Flexbox ที่ไม่ใช่ผู้ขายโดยเฉพาะ การอัปเดตรูปแบบกล่องยืดหยุ่น ("Flexbox")

ศูนย์และปรับขนาดอย่างถูกต้องใน Chrome / FF ไม่ได้อยู่ตรงกลาง แต่ปรับขนาดได้อย่างถูกต้องใน IE11

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

ศูนย์อย่างถูกต้องในทุกที่ตัดด้านบนเมื่อลดขนาดลง

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

ฉันพบว่าเช่นเบราว์เซอร์มีปัญหาในการจัดแนวคอนเทนเนอร์ภายในในแนวตั้งเมื่อตั้งค่าเฉพาะสไตล์ความสูงต่ำสุดหรือเมื่อสไตล์ความสูงหายไปเลย สิ่งที่ฉันทำคือเพิ่มสไตล์ความสูงด้วยค่าบางอย่างและนั่นช่วยแก้ปัญหาให้ฉันได้

ตัวอย่างเช่น :

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

ตอนนี้เรามีสไตล์ความสูง แต่ความสูงต่ำสุดจะเขียนทับ แบบนั้นคือมีความสุขและเรายังใช้ min-height ได้

หวังว่านี่จะเป็นประโยชน์สำหรับใครบางคน

ลองห่อ div ที่คุณใช้ flexbox flex-direction: columnไว้ในคอนเทนเนอร์ที่มี flexbox ด้วย

ฉันเพิ่งทดสอบสิ่งนี้ใน IE11 และใช้งานได้ การแก้ไขที่แปลก แต่จนกว่า Microsoft จะทำการแก้ไขข้อบกพร่องภายในภายนอก ... ก็จะต้องทำ!

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 ตัวอย่างสำหรับทดสอบใน IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

นี่คือโซลูชันการทำงานของฉัน (SCSS):

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

ในกรณีที่มีคนมาที่นี่พร้อมกับปัญหาเดียวกันกับที่ฉันมีซึ่งไม่ได้ระบุไว้โดยเฉพาะในความคิดเห็นก่อนหน้านี้

ฉันมีmargin: autoองค์ประกอบด้านในซึ่งทำให้มันติดอยู่ที่ด้านล่างของพาเรนต์ (หรือองค์ประกอบด้านนอก) margin: 0 auto;สิ่งที่คงที่สำหรับฉันก็เปลี่ยนขอบไป

นี่เป็นข้อบกพร่องที่ทราบแล้วซึ่งดูเหมือนว่าจะได้รับการแก้ไขภายในที่ Microsoft

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

คำตอบเดิมจาก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;
}

ฉันได้อัปเดต fiddles ทั้งสองแล้ว ฉันหวังว่ามันจะทำให้งานของคุณลุล่วง

อยู่ตรงกลาง

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

ศูนย์และเลื่อน

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

ฉันไม่มีประสบการณ์มากนักFlexboxแต่สำหรับฉันแล้วความสูงที่บังคับบนแท็กhtmlและbodyทำให้ข้อความหายไปด้านบนเมื่อปรับขนาด - ฉันไม่สามารถทดสอบใน IE ได้ แต่ฉันพบว่ามีผลเช่นเดียวกันใน Chrome

ฉันคีบซอของคุณและถอดheightและwidthประกาศออก

body
{
    margin: 0;
}

ดูเหมือนว่าการflexตั้งค่าจะต้องใช้กับflexองค์ประกอบอื่น ๆ อย่างไรก็ตามการประยุกต์ใช้display: flexกับ.innerปัญหาที่เกิดอย่างชัดเจนดังนั้นผมจึงตั้งค่า.innerการdisplay: blockและการตั้งค่า.outerเพื่อflexสำหรับการวางตำแหน่ง

ฉันตั้งค่า.outerความสูงต่ำสุดเพื่อเติมวิวพอร์ตdisplay: flexและตั้งค่าการจัดแนวแนวนอนและแนวตั้ง:

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

ฉันตั้งค่า.innerเป็นdisplay: blockอย่างชัดเจน ใน Chrome ก็ดูเหมือนว่ามันได้รับการถ่ายทอดจากflex .outerฉันยังตั้งค่าความกว้าง:

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

วิธีนี้แก้ไขปัญหาใน Chrome หวังว่าอาจทำเช่นเดียวกันใน IE11 นี่คือซอเวอร์ชั่นของฉัน: http://jsfiddle.net/ToddT/5CxAy/21/

พบวิธีแก้ปัญหาที่ดีที่ได้ผลสำหรับฉันตรวจสอบลิงค์นี้https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 ขั้นแรกเราเพิ่ม div แม่ที่สองเราเปลี่ยน min-height: 100% เป็น min- ความสูง: 100vh มันใช้งานได้เหมือนมีเสน่ห์

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

หากคุณสามารถกำหนดความกว้างและความสูงของผู้ปกครองได้มีวิธีที่ง่ายกว่าในการรวมรูปภาพโดยไม่ต้องสร้างคอนเทนเนอร์

ด้วยเหตุผลบางประการหากคุณกำหนดความกว้างต่ำสุด IE จะจดจำความกว้างสูงสุดด้วย

โซลูชันนี้ใช้ได้กับ IE10 +, Firefox และ 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/