div 구조잡기_가운데 정렬

1. 구역확인

2. 구조잡기

<div class="box">
    <div class="map"></div>
    <div class="story"></div>
</div>

 

3. 세밀하게 조정

.box {
    width: 1000px;            

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin: 40px auto 0px auto;
}

.map {
    width: 500px;
    height: 500px;

    background-color: red;

    margin-right: 30px;
}

.story {
    width: 450px;
    height: 500px;

    background-color: blue;
}

 

 

▶위아래로 가운데 정렬

   display: flex;
    flex-direction: column;   
    align-items: center;
    justify-content: center;

 

 

▶가로로 가운데 정렬

    display: flex;
    flex-direction: row;   
    align-items: center;
    justify-content: center;