css 중앙정렬

글자를 영역 기준으로 중앙정렬하기 위해
강의 듣은 바로는 height & line-height 똑같이 설정하고
text-align = center 하면 되었다.

그래서 궁금한 건 height & line-height 다르게 잡았을 때
어떻게 하면 중앙정렬 유지할 수 있을까.

검색하니까 아래 3줄 추가하면 text-align = center는 생략 가능해짐.

display: flex;
justify-content: center;
align-items: center;

전체 코드:

footer{
	background: #dbd8f8;
	height: 30px;	/* 영역의 높이 */
	line-height: 20px;	/* 각줄의 높이 */
	color: #054491;
	font-size: 12px;
	/* text-align: center; */
	display: flex;
	justify-content: center;
    align-items: center;}

결과:

그리고 해당건 글자 외 img에도 적용 가능
100% 비율로 보는 이미지:

200%로 확대 시에도 중앙정렬 유지됨:

참고자료