[internet-explorer] IE에서 Flexbox가 세로로 가운데에 있지 않음

페이지 중앙에 일부 Lipsum 콘텐츠가있는 간단한 웹 페이지가 있습니다. 이 페이지는 Chrome 및 Firefox에서 제대로 작동합니다. 창 크기를 줄이면 콘텐츠가 창을 채울 수 없을 때까지 창을 채운 다음 스크롤 막대를 추가하고 화면에서 아래쪽으로 콘텐츠를 채 웁니다.

그러나 페이지는 IE11에서 중앙에 있지 않습니다. 본문을 구부리면 페이지가 IE의 중앙에 오도록 할 수 있지만 그렇게하면 콘텐츠가 화면에서 위쪽으로 이동하기 시작하고 콘텐츠의 위쪽이 잘립니다.

다음은 두 가지 시나리오입니다. 관련 Fiddles를 참조하십시오. 문제가 즉시 분명하지 않으면 결과 창의 크기를 줄여서 강제로 스크롤 막대를 생성하도록합니다.

참고 :이 애플리케이션은 최신 버전의 Firefox, Chrome 및 IE (IE11)만을 대상으로하며, 모두 Flexbox 의 후보 권장 사항을 지원 하므로 기능 호환성이 문제가되지 않아야합니다 (이론상).

편집 : 전체 화면 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;
    }

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

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

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

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

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

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