디브 내에서 높이가 가변되는 콘텐츠를 수직으로 중심을 맞추는 방법은?

디브 내에서 높이가 가변되는 콘텐츠를 수직으로 중심을 맞추는 방법은?

콘텐츠의 높이가 가변적일 때 디브의 콘텐츠를 수직으로 중심을 맞추는 가장 좋은 방법은 무엇입니까?저의 경우 컨테이너 div의 높이가 고정되어 있지만, 컨테이너의 높이가 가변적인 경우에도 효과가 있을 수 있는 해결책이 있다면 좋을 것 같습니다.또한 CSS 해킹 및/또는 비의미적 마크업을 사용하지 않거나 거의 사용하지 않는 솔루션을 원합니다.

추가하기만 하면 됩니다.

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

내심의 디바에게.

내측 디브의 상단 테두리를 외측 디브의 절반 높이로 이동하는 것입니다. (top: 50%;) 그리고 내부 디바는 높이의 절반으로 늘어납니다 (transform: translateY(-50%))와 함께 작동합니다.position: absolute아니면relative.

명심하세요.transform그리고.translate단순화를 위해 포함되지 않은 공급업체 접두사가 있습니다.

코드펜: http://codepen.io/anon/pen/ZYprdb

당신의 브라우저가 지원하는 한, 이것이 내가 이 문제에 대해 찾은 최고의 해결책인 것 같습니다.::before의사 요소: CSS-Tricks: 미지의 세계를 중심으로.

추가 마크업이 필요하지 않고 매우 잘 작동하는 것 같습니다.사용할 수 없었습니다.display: table메소드 이유는table요소들은 복종하지 않습니다.max-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에 대한 브라우저 지원은 여전히 개략적입니다.

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

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

차일드 셀렉터를 사용하여 위의 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>

Forked CodePen: http://codepen.io/dougli/pen/Eeysg

지금까지 최고의 결과:

중심에 위치할 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%);
}

장점은 높이를 명시적으로 표시하지 않아도 된다는 것입니다.

이 입니다.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>  

이거 혼자 해보세요.

언급URL : https://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div