[css] 모든 브라우저에서 div를 세로로 가운데에 배치하는 방법은 무엇입니까?

Program / 글쓴이

divCSS를 세로 로 가운데에 맞추고 싶습니다 . 테이블이나 JavaScript는 원하지 않지만 순수한 CSS 만 필요합니다. 일부 솔루션을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다.

<body>
    <div>Div to be aligned vertically</div>
</body>

divInternet Explorer 6을 포함한 모든 주요 브라우저에서 세로로 가운데를 맞추는 방법은 무엇입니까?

답변

아래는 고정 너비의 유연한 높이 콘텐츠 상자 를 세로 및 가로로 가운데에 맞추기 위해 구축 할 수있는 최상의 만능 솔루션 입니다. 최신 버전의 Firefox, Opera, Chrome 및 Safari에서 테스트되어 작동했습니다.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

스 니펫 확장

동적 컨텐츠로 실무 예제보기

나는 유연성을 테스트하기 위해 동적 컨텐츠를 내장했으며 누군가가 그것에 대해 어떤 문제가 있는지 알고 싶습니다. 라이트 박스, 팝업 등 중앙 오버레이에도 잘 작동합니다.

답변

목록에서 볼 수없는 항목이 하나 더 있습니다.

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • 크로스 브라우저 (Internet Explorer 8 포함-해킹없는 Internet Explorer 10!)
  • 백분율 및 최소 / 최대-
  • 패딩에 관계없이 중앙에 위치 (박스 크기 조정 제외)
  • height선언해야합니다 ( 가변 높이 참조 )
  • overflow: auto콘텐츠 유출을 방지하기위한 권장 설정 (오버플로 참조)

출처 : CSS의 절대 수평 및 수직 센터링

답변

가장 간단한 방법은 다음 세 줄 의 CSS입니다.

1) 위치 : 상대;

2) 상단 : 50 %;

3) 변환 : translateY (-50 %);

다음은 예입니다 .

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

스 니펫 확장

답변

실제로 수직 센터링을 위해서는 두 개의 div가 필요합니다. 내용을 포함하는 div의 너비와 높이가 있어야합니다.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

스 니펫 확장

결과 는 다음과 같습니다

답변

이제 flexbox 솔루션은 최신 브라우저에서 매우 쉬운 방법이므로 다음과 같이 권장합니다.

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>

스 니펫 확장

답변

편집 2020 : IE8과 같은 오래된 브라우저를 지원 해야하는 경우에만 사용하십시오 (반드시 ?). 그렇지 않은 경우 flexbox를 사용하십시오.

이것은 내가 찾은 가장 간단한 방법이며 항상 사용합니다 ( jsFiddle 데모 여기 )

이 기사에 대해 CSS Tricks의 Chris Coyier에게 감사한다 .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

스 니펫 확장

IE8부터 지원이 시작됩니다.

답변

많은 연구 끝에 마침내 최고의 솔루션을 찾았습니다. 부동 요소에서도 작동합니다. 소스보기 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}