[CSS][Bootstrap] Spinner 화면 중앙 위치하도록 설정

[CSS][Bootstrap] Spinner 화면 중앙 위치하도록 설정하는 방법

---

Bootstrap4 - spinners

spinner, 즉 loading 표시를 화면 가운데(중앙)에 위치하도록 하기 위에서는 아래와 같이 css에 추가해주면 된다.

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */
  right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */
}

top과 right의 ... 은 각자 자신에게 맞는 요소 크기를 입력해 주면 된다.

---

예)
bootstrap4 - border-spinner를 화면 가운데 위치하도록 설정하기.

<div class="text-center loading">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

.text-center {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 100%;
}

.spinner-border {
    display: block;
    position: fixed;
    top: calc(50% - (58px / 2));  
    right: calc(50% - (58px / 2));
}

---

[참고] https://stackoverflow.com/questions/49365372/how-to-center-a-spinner-horizontally-and-vertically-in-page