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;
 }

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

Answer 2

正确定位你的div。请在回答之前进行搜索。

＆＃13;

/data/data/de.robv.android.xposed.installer/log/

＆＃13;

Answer 3

使用display：table和table-cell

.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>

我希望我的回答对您有所帮助:)。

如何在HTML中垂直居中div

4 个答案: