How to center a div vertically in HTML

Question

Consider there are two divs like showing bellow.

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

I want the sub div to be vertically centered not to the whole page but to the main div.

score 0 · Answer 1 · answered Jul 19 '15 at 06:19

Unlike what the convention has been for the last couple of years using tables, you can do this much more intuitively with 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;
 }

(Your browser support mileage may vary.)

score 0 · Answer 2 · answered Jul 19 '15 at 06:22

Position your divs correctlly . Please search before requesting an answer.

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

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

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

  </div>
</div>

score 0 · Answer 3 · answered Jul 19 '15 at 06:23

Use display:table and 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/

score 0 · Answer 4 · answered Jul 19 '15 at 06:31

I have made my css inside the tag and it looks good and satisfy your requirement.

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

I hope my answer may helpful for you :)

How to center a div vertically in HTML

4 Answers4