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

이제 높이 스타일이 있지만 최소 높이가이를 덮어 씁니다. 그렇게하면 행복하고 우리는 여전히 min-height를 사용할 수 있습니다.

이것이 누군가에게 도움이되기를 바랍니다.

flexboxed flex-direction: column컨테이너에 flexboxed div를 래핑하십시오 .

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

IE11에서 테스트 할 수있는 2 가지 예 : 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;
}

두 바이올린을 모두 업데이트했습니다. 나는 그것이 당신의 일을 끝내기를 바랍니다.

센터링

    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. 이 상속처럼 크롬, 그것은 모습 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/