DIV 세로 중앙 정렬

DIV 세로 가운데 정렬

DIV 세로 정렬 중간

DIV vertical-align middle

예시1: flex ★

<style>
  .box1 {
    width: 100px; height: 100px;
    background: orange;
  }
  .box2 {
    height: 50px;
    background: lightgreen;
  }
  .box3 {
    height: 80px;
    background: skyblue;
    text-align:center;
  }
  .middle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="box1 middle">박스1</div>
<div class="box2 middle">박스2<br>안녕하세요</div>
<div class="box3 middle">박스2<br>안녕하세요</div>

예시2: line-height

• 텍스트가 한줄일 경우만 가능하다.

<style>
div {
	width: 200px;
  height: 50px;
	line-height: 50px;
	margin: 10px;
	text-align: center;
}
.box-a { background-color: red; }
.box-helloworld { background-color: orange; }
.box-multiline { background-color: yellow; }
</style>

<div class='box-a'>A</div>
<div class='box-helloworld'>Hello, World!</div>
<div class='box-multiline'>multiple<br>line</div>

예시3: img 이용

<style>
.div1 {height:200px;float:left;background:#aaa;}
.div2 {height:200px;float:left;background:#bbb;}
.div3 {height:200px;float:left;background:#ccc;}
.div4 {height:200px;float:left;background:#ddd;}
.img1 {height:200px;width:0;}
.img2 {height:200px;width:0;vertical-align:top}
.img3 {height:200px;width:0;vertical-align:middle}
.img4 {height:200px;width:0;vertical-align:bottom}
</style>
<div class='div1'><img class='img1'/><span>(기본값)</span></div>
<div class='div3'><img class='img2'/><span>top</span></div>
<div class='div2'><img class='img3'/><span>middle</span></div>
<div class='div4'><img class='img4'/><span>bottom</span></div>

같이 보기

• TD 세로 중앙
• HTML div