div 수직 정렬 중간 CSS

div 수직 정렬 중간 CSS

---

텍스트를 abc div의 div 중간에만 세로로 맞추려고합니다.

높이를 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;
}

---

내가 여기서 생각할 수있는 또 다른 해결책 은 Y 축을 나타내는 곳에서 transform속성 을 사용하는 것입니다 . 그것은 ... 꽤 똑바로 앞으로 당신이 요소에 대한 위치 설정하기 만의 이상 위치 로부터 음의와 그것의 축에서 번역translateY()Yabsolute50%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에 이것을 제공하십시오 :

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>

---

Old question but nowadays CSS3 makes vertical alignment really simple!

Just add to #abc the following css:

display:flex;
align-items:center;

Simple Demo

Original question demo updated

Simple Example:

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

---

I found this solution by Sebastian Ekström. It's quick, dirty, and works really well. Even if you don't know the parent's height:

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

Read the full article here.

---

You can use Line height a big as height of the div. But for me best solution is this --> position:relative; top:50%; transform:translate(0,50%);

---

How about adding 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;
}

Fiddle, line-height

Or padding on #abc. This is the result with padding

Update

Add in your css :

#abc img{
   vertical-align: middle;
}

The result. Hope this what you looking for.

---

Try this:

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

Another method for centering a 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;
}

---

Use the translateY CSS property to vertically center your text in it's container

<style>
.centertext{

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

}
</style>

And then apply it to your containing DIV

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Adjust the translateY percentage to suit your needs. Hope this helps

---

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="text-align-center"> Align center</div>

---

This Code Is for Vertical Middle and Horizontal Center Align:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

참고URL : https://stackoverflow.com/questions/18649106/div-vertical-align-middle-css