如何居中對齊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

Vucko的答案是正確的。 我想添加評論，但由於我的聲譽還不夠，我將其發布為答案。

您可以在需要居中的內部div上使用vertical-align屬性。 此屬性僅適用於具有display:inline-block或display:table元素。 請參閱此處的實際規格。

重復Vucko的回答：

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

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

您可以使用inline-block而不是float ，然后可以使用vertical-align屬性：

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

JSFiddle

但是， 請注意空白問題 。