[html/css] div 세로 중앙 정렬

 

 

DIV 세로 중앙 정렬

높이가 변하는 DIV 세로 중앙 정렬이 잘 될까요? HTML/CSS은 생각대로 잘 안움직입니다.

왼쪽의 div에 속한 이미지를 세로로 중앙정렬하는 코드입니다.

	<div style="position:relative; border: 1px solid #ebebeb">

		<div style="display: inline-block; margin-left: 10px; margin-right: 10px; position:absolute; top:50%; margin-top:-20px;">
			<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fk.kakaocdn.net%2Fdn%2Flevus%2FbtqDg46L9Sn%2FYIMkDRk6ecgAPxX8UK7V0k%2Fimg.png" style="width: 42px;">
		</div>

		<div style="display: inline-block; margin-left:62px; margin-right:6px;">
			<strong>DIV 세로 중앙 정렬</strong>
			<p>높이가 변하는 DIV 세로 중앙 정렬이 잘 될까요? HTML/CSS은 생각대로 잘 안움직입니다.</p>
		</div>
	</div>