使用CSS中心兩個元素

Question

我怎樣才能垂直居中顯示窗體和旁邊的div？如果兩者的容器都小於內容高度空間，我需要能夠滾動。

HTML：

<div id="outer_1"> 
    <div id="inner_1"> 
    <form id="form"> 
     <input/> 
     <input/> 
    </form> 
    <div id="login-request"> 
     If you do not have a login, 
     <span>touch here</span> 
    </div> 
    </div> 
</div> 

CSS：

#outer_1 { 
    width: 400px; 
    height: 400px; 
    border-style: solid; 
    border-width: 2px; 
} 

#inner_1 { 
    width: 200px; 
    height: 100%; 
    display: table; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
    margin-left: auto; 
    margin-right: auto; 
} 

#form { 
    text-align: center; 
    vertical-align: middle; 
} 

#login-request { 
    text-align: center; 
    vertical-align: middle; 
} 

請考慮這個JSFiddle。

Answer 1

試試這個，形式和消息都是在水平和垂直居中對齊，看看它在 http://jsfiddle.net/4vtf5cn6/10/

<div id="outer_1"> 
    <div id="inner_1"> 
    <form id="form"> 
     <input/> 
     <input/> 
     <div id="login-request" class="login-request-alert"> 
     If you do not have a Travelport Mobile Agent login, 
     <span class="urlink">touch here</span> 
     </div> 
    </form> 
    </div> 
</div> 

#outer_1{ 
    width: 400px; 
    height: 400px; 
    border-style: solid; 
    border-width: 2px; 
} 
#inner_1{ 
    padding-top:30px; 
    width: 200px; 
    height: 100%; 
    display: table; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
    margin-left: auto; 
    margin-right: auto; 
} 
#form{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    float:left; 
} 
#login-request{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    float:left; 
} 

Answer 2

難道你不能只用這兩個div上的float:left來解決這個問題嗎？

的jsfiddle：http://jsfiddle.net/4vtf5cn6/6/

添加的行標有**，所以不只是複製下面的代碼;）

#outer_1{ 
    width: 400px; 
    height: 400px; 
    border-style: solid; 
    border-width: 2px; 

} 

#inner_1{ 
    **padding-top:30px; 
    width: 200px; 
    height: 100%; 
    display: table; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
    margin-left: auto; 
    margin-right: auto; 
} 

#form{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    **float:left; 
} 
#login-request{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    **float:left; 
} 

結果：

Answer 3

試這DEMO

#form{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 
#login-request{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 4

選項可以是CSS規則的margin-top屬性的百分比值。例如：

.container { 
 
    width: 150px; 
 
    height: 200px; 
 
    border: 3px solid orange; 
 
} 
 
.child { 
 
    /* Center horizontally */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
    /* Center vertically */ 
 
    margin-top: 50%; 
 
    
 
    width: 30px; 
 
    height: 40px; 
 
    border: 3px solid yellowgreen; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
</div>

Answer 5

最簡單的方法是添加一個<div>，其中包含#form和#login-request。像：

<div id="outer_1"> 
    <div id="inner_1"> 
     <div id="enclose"> 
      <form id="form"> 
       <input/> 
       <input/> 
      </form> 
      <div id="login-request" > 
       If you do not have a login, 
       <span>touch here</span> 
      </div> 
     </div> 
    </div> 
</div> 

，並在CSS：

#enclose { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    overflow-y: auto; 
} 

和風格#form，當你需要它#login-request