이미지 또는 텍스트를 정중앙으로 정렬하기

중앙으로 정렬된 이미지

<style>
.img{
	float:left;
	width:300px;
	height:300px;
	display: flex;
	justify-content: center; /* 수평 중앙 정렬 */
	align-items: center; /* 수직 중앙 정렬 */ 
}
</style>

 

<div class=img>
 	이미지 또는 텍스트 중앙 정렬
	<!--<img src="text_img.jpg" />-->
</div>

 

상자 안에 텍스트나 이미지를 넣으면 상자 안 맨 위로 붙어버린다.

정중앙으로 배치하기 위해서는 다음과 같은 클래스가 필요하다.

 

justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */