[css] <div>에서 세로 정렬 가운데

#abc divat 50px및 텍스트 의 높이를 유지 하여 div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

스 니펫 확장

답변

을 사용할 수 있으며 거기에 line-height: 50px;필요하지 않습니다 vertical-align: middle;.

데모

여러 라인을했습니다 경우 위 그래서 경우에 당신이 사용하여 텍스트 줄 바꿈 수, 실패 span사용보다와 display: table-cell;와 display: table;와 함께 vertical-align: middle;, 또한 사용하는 것을 잊지 마세요 width: 100%;에 대한#abc

데모

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

내가 여기 생각할 수있는 또 다른 해결책은 사용하는 transform부동산의 translateY()경우 Y분명히 Y 축 의미합니다. 그것은 … 꽤 똑바로 앞으로 당신이 요소에 대한 위치 설정하기 만의 absolute이상 위치 50%로부터 top음의와 그것의 축에서 번역-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

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

데모

IE8과 같은 이전 브라우저에서는 지원되지 않지만, 각각 -ms, -moz및 -webkit접두사 를 사용하여 IE9 및 기타 이전 브라우저 버전의 Chrome 및 Firefox를 만들 수 있습니다 .

에 대한 자세한 내용 transform은 여기 를 참조 하십시오 .

답변

간단합니다. 부모 div에 다음을 지정합니다.

display: table;

그리고 자식 div (s)에게 다음을 제공합니다.

display: table-cell;
vertical-align: middle;

그게 다야!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

스 니펫 확장

답변

오래된 질문이지만 요즘 CSS3 는 수직 정렬을 정말 간단 하게 만듭니다. !

#abc다음 CSS에 추가하십시오 .

display:flex;
align-items:center;

간단한 데모

원래 질문 데모 업데이트

간단한 예 :

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

스 니펫 확장

답변

Sebastian Ekström이이 솔루션을 찾았습니다. 빠르고, 더럽고, 정말 잘 작동합니다. 부모의 키를 모르더라도 :

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

여기 에서 전체 기사를 읽어보십시오 .

답변

div의 높이만큼 큰 Line height를 사용할 수 있습니다. 하지만 나에게 가장 좋은 해결책은 이것이다->position:relative; top:50%; transform:translate(0,50%);

답변

추가는 line-height어떻습니까?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

바이올린, 줄 높이

또는 padding에 #abc.이것은 패딩을 사용한 결과입니다.

최신 정보

CSS를 추가하십시오.

#abc img{
   vertical-align: middle;
}

결과 . 당신이 찾고있는 것을 희망하십시오.

답변

이 시도:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

div를 중앙에 배치하는 또 다른 방법 :

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}