원 정중앙에 텍스트 배치는 어떻게 하나요? 채택완료

하호헤하

1년 전 조회 12,388

아래 코드를 썼는데 원 정중앙에 ★이 안 오는데 어떻게 해결해야 할까요? ㅠㅠ

Copy

<div class="circle">★</div>

Copy

.circle {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 15vw;

    height: 15vw;

    max-width: 120px;

    max-height: 120px;

    border: 9px solid black;

    border-radius: 50%;

    margin-right: 15px;

    font-size: min(8vw, 70px);

    font-weight: bold;

    color: black;

    flex-shrink: 0;

    line-height: 1;

}

 

@media (max-width: 600px) { /* 모바일 화면 크기에 맞게 조정 */

    .circle {

        width: 20vw;

        height: 20vw;

        font-size: min(10vw, 70px);

    }

}

아래 사진처럼 모바일에서는 ★이 정중앙에 잘 오는데 pc 화면에서는 정중앙에서 살짝 아래로 내려가서요.

1995115642_1716398991.4055.jpg