10/24: TIL | block,inline element 중앙정렬, flex로 가운데 정렬

상단바 두번째 요소 정가운데에 놓기

.status-bar{
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
}
.status-bar__column{
    width: 33%;
}
.status-bar__column:nth-child(2){
    display: flex;
    justify-content: center;
}
.status-bar__column:last-child{
    display: flex;
    justify-content: flex-end;
}

- 그냥 space-between만 하면 첫번째div가 길어서 두번째div가 정가운데 위치X

- center로 두고 각각 width를 33% + 왼쪽부터 차례로 정렬해주기

---

text tag(<h1></h1>, <p></p>)의 가운데 정렬

- text-align:center 

---

flex를 이용한 세로로 가운데 정렬

.welcome-header{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.welcome-header__text{
    width: 50%;
}