[css] div 내에서 가변 높이로 콘텐츠를 세로로 가운데 맞추는 방법은 무엇입니까?

이것은 여러 번 수행 해야하는 일이며 일관된 솔루션을 유지하려면 시맨틱하지 않은 마크 업과 브라우저 특정 해킹을 추가해야합니다. CSS 3에 대한 브라우저 지원을 받으면 죄를 짓지 않고 수직 센터링을 얻을 수 있습니다.

이 기술에 대한 더 나은 설명을 위해 내가 수정 한 기사를 볼 수 있지만 기본적으로 추가 요소를 추가하고 IE와 브라우저 position:table\table-cell에서 테이블이 아닌 요소 를 지원 하는 다른 스타일을 적용하는 것이 포함됩니다 .

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

특정 브라우저 세트에 스타일을 적용하는 많은 방법 (해킹)이 있습니다. 조건부 주석을 사용했지만 위에 링크 된 기사를보고 다른 두 가지 기술을 확인하십시오.

참고 : 높이를 미리 알고 있거나 한 줄의 텍스트를 가운데에 배치하려는 경우 또는 다른 여러 경우에 세로 가운데를 맞추는 간단한 방법이 있습니다. 브라우저 해킹이나 시맨틱하지 않은 마크 업이 필요없는 방법이있을 수 있으므로 더 자세한 정보가있는 경우 처리하십시오.

업데이트 : CSS3에 대한 브라우저 지원이 향상되어 플렉스 박스와 변환이 모두 수직 중심화 (다른 효과 중에서)를 얻는 대체 방법으로 제공됩니다. 참조 이 다른 질문을 현대적인 방법에 대한 자세한 내용은, 그러나 브라우저 지원은 여전히 CSS3에 대한 스케치 있음을 유의하십시오.

답변

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

.container{
  position: relative;
}

.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}