如何在HTML中垂直放置一个div

Question

考虑下面有两个div，如下图所示。

<style> 
    div.main{ 
    width: 1000px; 
    height: 300px; 
    background-color: black; 
    } 

    div.sub{ 
    width: 500px; 
    height: 100px; 
    background-color: red; 
    } 
</style> 

<div class="main"> 
    <div class="sub"> 

    </div> 
</div> 

我想子div被垂直居中不是整个页面，但在主div。

Answer 1

与过去几年中使用表格的惯例不同，您可以使用flexbox更直观地做到这一点。

div.main{ 
    width: 1000px; 
    height: 300px; 
    background-color: black; 

    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    align-items: center; 
} 

correctlly（您的浏览器支持的里程可能会有所不同。）

Answer 2

将您的申报单。在请求答案之前请先搜索。

<style> 
 
    div.main{ 
 
    width: 1000px; 
 
    height: 300px; 
 
\t position:relative; 
 
    background-color: black; 
 
    } 
 

 
    div.sub{ 
 
    width: 500px; 
 
    height: 100px; 
 
\t position:absolute; 
 
\t top:0; 
 
\t bottom:0; 
 
\t margin-top:auto; 
 
\t margin-bottom:auto; 
 
    background-color: red; 
 
    } 
 
</style> 
 

 
<div class="main"> 
 
    <div class="sub"> 
 

 
    </div> 
 
</div>

Answer 3

使用显示：表和表芯

.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    vertical-align: middle; 
    border: 1px solid #000; 
} 
.content { 
    display: table-cell; 
    border: 1px solid #000; 
    display: inline-block; 
    text-align: left; 
} 
</style> 
<div class="container"> 
    <div class="content"> 
     Test 1 
     <br/> 
     Test 2 
     <br/> 
     Test 3 
    </div> 
</div> 

http://jsfiddle.net/vxdkkeso/1/

Answer 4

我做了我的CSS标签内，它看起来不错，满足您的要求。

<div style="width:1000px;position:fixed;z-index:210;background-color:black;"> 

    <div style="position:relative; margin: 0 auto;width:500px;border:1px solid #000;background-color:red;height:26px;padding:5px;"> 

    <div> 
</div> 

我希望我的回答可以有助于您:)