다른 div 내에서 div를 가운데 정렬하는 방법

Question

다른 div 내에있는 div를 가운데 정렬하려고합니다. "계획 컨테이너"안에있는 "옵션"div를 수직으로 중심에두고 싶습니다.

미리 감사드립니다.

.plan-container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin-top: 62px; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 

 
.options { 
 
    float: left; 
 
    width: 151px; 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 

 
.plan { 
 
    float: left; 
 
    width: 220px; 
 
    height: 600px; 
 
    margin-left: 23px; 
 
    background-color: purple; 
 
} 
 

 
.plan:last-child { 
 
    float: right; 
 
} 
 

 
.plan-featured{ 
 
    width: 300px; 
 
    height: 600px; 
 
    background-color: purple; 
 
}

<div class="plan-container"> 
 
    <div class="options">Options</div> 
 
    <div class="plan">Box one</div> 
 
    <div class="plan plan-featured">Box two</div> 
 
    <div class="plan">Box three</div> 
 
</div>

Answer 1

당신은 float 대신 inline-block를 사용하십시오, 당신은 vertical-align 속성을 사용할 수있는 것보다 :

.plan-container>div{ 
    display: inline-block; 
    vertical-align: middle; 
} 

을 예 : beware of the whitespace issue.

Answer 2

- 그것을이

.plan-container { 
    display: flex; 
    flex-wrap: wrap; /* optional. only if you want the items to wrap */ 
    justify-content: center; /* for horizontal alignment */ 
    align-items: center; /* for vertical alignment */ 
} 

Answer 3

Vucko의 답변이 맞습니다. 나는 코멘트를 추가하고 싶었지만 아직 충분한 평판이 없기 때문에 대답으로 게시 할 것입니다.

센터링이 필요한 div 내부의 vertical-align 속성을 사용할 수 있습니다. 이 속성은 display:inline-block 또는 display:table 인 요소에서만 작동합니다. 실제 사양 here을 참조하십시오.

.options { 
    display: inline-block; 
    vertical-align: middle; 
}