[CSS] 수평중앙정렬

전체 코드

const TodaySentencePage = () => {
    return (
        <>
            <NavBar/>
            <Background>
                <TitleText>오늘의 문장</TitleText>
                <SentencesContainer className="container-fluid row">
                    <EachSentence>
                        <QuoteBox>
                            <QuoteText>고독을 배설한 자리에서 내려앉는 환희. 이 달콤함을 위해 그는 예술을 표방한다.</QuoteText>
                        </QuoteBox>
                        <BookIcon size="250" color="#97A4E8"/>
                    </EachSentence>
                </SentencesContainer>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <OneSentenceContainer>
                        <BookContainer>
                            <BookImage></BookImage>
                            <BookInfo>
                                <BookTitleBox>
                                    <BookTitle>뼈가 자라는 여름</BookTitle>
                                </BookTitleBox>
                                <BookTextBox>
                                    <BookSentence>슬픔을 병처럼 여기지 않겠다고 말하면서 나는 조금씩 의연해졌다. 슬픔에게도 비밀이 있을거라고. 그 비밀을 추궁하지 않기로 했다.</BookSentence>
                                </BookTextBox>
                                <BookSubtext>저자: 백년의 고독<br/>분야: 소설<br/>출판사: 민음사</BookSubtext>
                            </BookInfo>
                        </BookContainer>
                    </OneSentenceContainer>
                </div>
            </Background>
            <FooterBar/>
        </>
    )
}


const OneSentenceContainer = styled.div`
    /* display: flex; */
    justify-content: center;
    padding-top: 70px;
    background-color: white;
    width: 1295px;
    height: 554px;
    border-radius: 50px;
`;

const BookContainer = styled.div`
    display: flex;
    margin: 0 90px;
`;

const BookImage = styled.div`
    width: 241px;
    height: 366px;
    background-color: #d9d9d9;
    box-shadow: 0px 5px 10px #d9d9d9;
`;

const BookInfo = styled.div`
    margin-left: 65px;  
`;

const BookTitleBox = styled.div`
    display: flex;
    align-items: center;
    margin-bottom: 10px;
`;

const BookTitle = styled.p`
    font-size: 40px;
    font-family: "KOTRA_BOLD";
    margin: 0;
    margin-left: 10px;
    
`;


const BookTextBox = styled.div`
    position: relative;
    align-items: center;
    display: flex;
    height: 132px;
    width: 665px;
    background-color: #2C2C60;
    clip-path: polygon(0% 0%, 100% 0, 90% 50%, 100% 100%, 0% 100%);
    `;

const BookSentence = styled.div`
    margin-left: 30px;
    width: 558px;
    color: white;
    font-size: 20px;
    font-family: "KOTRA_GOTHIC";
`;

const BookSubtext = styled.p`
    margin-top: 20px;
    font-size: 24px;
    line-height: 1.9;
`;

---

<OneSentenceContainer>
    <BookContainer>
        <BookImage></BookImage>
        <BookInfo>
            <BookTitleBox>
                <BookTitle>뼈가 자라는 여름</BookTitle>
            </BookTitleBox>
            <BookTextBox>
                <BookSentence>슬픔을 병처럼 여기지 않겠다고 말하면서 나는 조금씩 의연해졌다. 슬픔에게도 비밀이 있을거라고. 그 비밀을 추궁하지 않기로 했다.</BookSentence>
            </BookTextBox>
            <BookSubtext>저자: 백년의 고독<br/>분야: 소설<br/>출판사: 민음사</BookSubtext>
        </BookInfo>
    </BookContainer>
</OneSentenceContainer>

이 부분에서 OneSentenceContainer를 중앙정렬하고 싶었다. 하지만 왼쪽으로 치우친 상태였다. 
그래서 친구한테 물어보니까 밖에 div를 하나 더 만들고 부모 div에 display: 'flex', justify-content: 'center' 라는 속성을 줘야 수평중앙정렬이 된다고 했다. 
그동안 그냥 justify-content: 'center' 속성만 주면 중앙정렬이 된다고 생각했는데 flex를 붙여야 적용이 됐다. 
아직 덜 공부했나보다.