[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%2Fblog.kakaocdn.net%2Fdna%2Flevus%2FbtqDg46L9Sn%2FAAAAAAAAAAAAAAAAAAAAAIceWiVYZzROX0ahOiMBQdVhcoURi4ZO_EM0NMnBiNsL%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1751295599%26allow_ip%3D%26allow_referer%3D%26signature%3De70WUxNw3WmKVijvT5MaXNbOeoA%253D" 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>