블록요소내 세로 정렬

1. padding

- 부모박스의 높이가 제한적이지 않을경우.

#box {width:500px; border:3px solid #ccc;}

.al {padding:30px; text-align: center;}

---

<div id="box">

<p class="al">vertical-align: middle</p>

</div>

2. line-height

 - 부모요소의 높이가 제한되어 있고, 한줄일경우

#box {

width:500px; height:60px;

line-height: 60px;

border:3px solid #ccc; 

text-align: center; 

   }

---

<div id="box">

<p>vertical-align: middle</p>

</div>

 - 부모요소의 높이가 제한되어 있고, 여러줄일 경우

#box {

width:500px; height:60px;

line-height: 60px; 

border:3px solid #ccc; 

text-align: center;

}

p {

text-align: center; 

display: inline-block; 

vertical-align: middle;  

line-height: 1.5;

}

---

<div id="box">

<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element</p>

</div>

3. position & transform

- 부모요소의 높이가 제한되어 있고 다른 요소들이 position값에 영향을 받지 않을경우

#box {

width: 500px; height: 200px; 

position: relative; 

border: 3px solid #ccc; 

text-align: center;

}

.al {

margin: 0; 

position: absolute; top: 50%; left: 50%;

transform: translateX(-50%) translateY(-50%);

}

---

<div id="box">

<p class="al">vertical-align: middle</p>

</div>