조그만 요소 flex 활용하여 가운데로 맞추기.

위와 같은 조그만 버튼을 만들때 가로세로 중앙 맞추는게 여간 귀찮은 일이 아니다.

여태까지는 text-align:center; 를 주고 line-height로 높이 맞춰주고 padding으로 크기를 조절해 왔는데 가끔 미세하게 몇px 중심이 맞지 않는것...

그냥 그런데로 살아오다가 이제 좀 정확하게 맞추고 싶어서 타 사이트를 찾아 보았더니 방법은 매우 간단

span {
	width: 50px; height: 28px;
  	display: flex; flex:0 0 auto; justify-content: center; align-items: center;
 }

이렇게 flex를 활용하여 매우 간단하게 중앙 정렬이 가능 하다는것..

ie때문에 flex를 웬만하면 사용하지 않아 왔는데 이제 없어진다고 하니 깊이 배워봐야겠다.