div를 세로로 가운데 정렬하는 방법 (나침반)?

글쎄, 모든게 궁금한데 ... 몸의 중앙에 수직으로 정렬하고 싶은 로그인 양식을 만들고 있습니다.div를 세로로 가운데 정렬하는 방법 (나침반)?

<body> 
    <div> 
     A div of unknown height to be vertically centered. 
    </div> 
</body>

이 그것을 만들 것 CSS3 코드 :

HTML 코드는 매우 간단하다 ... 내가 말대꾸와 나침반에 새로 온 사람, 나는 이것에 대한 올바른 믹스 인을 사용하는 투쟁 작업 :

<style> 
    html{ 
     height:100%; 
    } 
    body{ 
     height:100%; 
     display:flex; 
     align-items:center; 
     /* I spared all the compatibility properties for the different browsers */ 
    } 
</style>

___EDIT :이 같은까지왔다,하지만 난 SASS와 부모 선택기를 사용하는 방법을 오해 실현

div.ieVerticalCentered { 
    body.verticalCentering & { 
     height:100%;  
     display:-ms-flexbox; 
     display:-moz-box; 
     display:-webkit-box; 
     display:-webkit-flex; 
     display:flex;  
     -ms-align-items:center; 
     -moz-align-items:center; 
     -webkit-align-items:center; 
     align-items:center; 
      html.verticalCentering & { 
      height:100%; 
     } 
    } 
}

따라서 중요한 질문은 하위 요소에 특정 클래스가있을 때 특정 스타일을 부모 요소에 적용 할 수 있는지 여부입니다.

제 생각에 정적 CSS에서는 가능하지 않지만 JS에서는 가능합니다. 단지 Sass를 발견했기 때문에 뭔가 좋은 것을 고려할 수 있는지 궁금해졌습니다.

출처

2014-04-23 Yako

마크 업을 공유하거나 최소한 유효한 짧은 예시를 피들에 제공하십시오. 로그인 양식의 너비/높이가 고정되어 있지 않습니까? 어떤 브라우저와 버전을 지원해야합니까? – fcalderan

[CSS에서 div의 세로 가운데 정렬 방법?] (http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) – cimmanon

모든 CSS 속임수가 콤파스에서 사용 된 믹스 인 것은 아닙니다. 작업을 완료하는 데 필요한 CSS가 무엇인지 모르는 경우 Sass 나 Compass에게 어떻게 할 수 있습니까? – cimmanon

나는 내용을 가운데이 믹스 인을 사용합니다. 그것은 tranform을 사용하므로 모든 버전의 IE가 지원되는 것은 아닙니다.

믹스 인 :

@mixin centre($axis: "both"){ 
    position:absolute; 
    @if $axis == "y"{ 
     top:50%; 
     -webkit-transform: translateY(-50%); 
     -moz-transform: translateY(-50%); 
     -ms-transform: translateY(-50%); 
     -o-transform: translateY(-50%); 
     transform: translateY(-50%); 
    } 
    @if $axis == "x"{ 
     left:50%; 
     -webkit-transform: translateX(-50%); 
     -moz-transform: translateX(-50%); 
     -ms-transform: translateX(-50%); 
     -o-transform: translateX(-50%); 
     transform: translateX(-50%); 
    } 
    @if $axis == "both"{ 
     top:50%; 
     left:50%; 
     -webkit-transform: translate(-50%, -50%); 
     -moz-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
    } 
}

사용법 :

Y axis : @include centre(y); 
X axis : @include centre(x); 
Both axis : @include centre;

WORKING 예 : Fiddle

출처

2014-04-24 11:03:25

대단히 감사합니다. 이것은 내 솔루션보다 훨씬 좋네요! – Yako

당신을 진심으로 환영합니다! –

IE8 또는 IE9에서는 작동하지 않습니다. –

드디어 해결책을 찾았습니다.

특정 클래스를 html 태그에 추가해야합니다.

html.verticalCenter { // Center vertically body's block-children 
    height: 100%; 
    & body { 
     height:100%;  
     display:-ms-flexbox; 
     display:-moz-box; 
     display:-webkit-box; 
     display:-webkit-flex; 
     display:flex;  
     -ms-align-items:center; 
     -moz-align-items:center; 
     -webkit-align-items:center; 
     align-items:center; 
    } 
}

또는, 나침반있어 경우는 :

html.verticalCenter { // Center vertically body's block-children 
    height: 100%; 
    & body { 
     height:100%;  
     @include display-box;   
     @include box-align(center); 
    } 
}

출처

2014-04-24 06:30:56 Yako

-1

vertical-align { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

링크 :

https://github.com/DimitriMikadze/sass-useful-mixins

출처

2015-08-08 08:41:05

기존 답변에 아무 것도 추가하지 않습니다 (http://stackoverflow.com/a/23267046/1652962 참조). – cimmanon

div를 세로로 가운데 정렬하는 방법 (나침반)?

답변

관련 문제