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

내용의 높이가 가변적 일 때 div의 내용을 세로로 가운데 맞추는 가장 좋은 방법은 무엇입니까? 내 특별한 경우에는 컨테이너 div의 높이가 고정되어 있지만 컨테이너의 높이가 가변적 인 경우 해결책이 있다면 좋을 것입니다. 또한 CSS 해킹 및 / 또는 비의 미적 마크 업을 사용하지 않거나 거의 사용하지 않는 솔루션을 원합니다.

그냥 추가

position: relative;
top: 50%;
transform: translateY(-50%);

내부 div.

내부 div의 상단 테두리를 외부 div의 절반 높이 ( top: 50%;)로 이동 한 다음 내부 div의 높이를 절반 ( transform: translateY(-50%))으로 이동합니다. 이것은 작동합니다 position: absolute나 relative.

있다는 사실을 숙지 transform하고 translate단순에 포함되지 않은 업체 접두사가 있습니다.

코덱 : http://codepen.io/anon/pen/ZYprdb

브라우저가 ::before의사 요소 인 CSS-Tricks : Centering in the Unknown을 지원하는 한이 문제에 대해 내가 찾은 최고의 솔루션 인 것 같습니다 .

추가 마크 업이 필요하지 않으며 매우 잘 작동하는 것 같습니다. 요소가 속성을 준수하지 않기 display: table때문에 메서드를 사용할 수 없습니다 .tablemax-height

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

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

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <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>

이것은 여러 번 수행 해야하는 일이며 일관된 솔루션을 유지하려면 시맨틱하지 않은 마크 업과 브라우저 특정 해킹을 추가해야합니다. 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에 대한 스케치 있음을 유의하십시오.

자식 선택기를 사용하여 위 의 Fadi의 놀라운 대답을 취해 적용 할 수있는 하나의 CSS 규칙으로 정리했습니다. 이제 내가 contentCentered중심에두고 싶은 요소에 클래스 이름을 추가 하기 만하면됩니다.

.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>

갈래 코드 펜 : http://codepen.io/dougli/pen/Eeysg

지금까지 가장 좋은 결과 :

중심이 될 div :

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

여백 자동을 사용할 수 있습니다. 플렉스를 사용하면 div도 세로 중앙에있는 것처럼 보입니다.

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

장점은 높이를 명시 적으로 만들 필요가 없습니다.

이것은 div동적 (백분율) 높이의 멋진 솔루션입니다 .

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

혼자서 시도하십시오.

아래 코드와 같은 플렉스 디스플레이를 사용할 수 있습니다.

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>