DIV in DIV

Horizontal-vertically centered DIV in another DIV

by Ovi Stof

HTML

<div class="div_ext">
  <div class="div_in">This is a vertically and horizontally centered DIV.</div>
</div>
<p>
If you want only vertical centering, you can use syntax:<br>
.div_in {<br>
&nbsp;&nbsp;&nbsp;position: absolute;<br>
&nbsp;&nbsp;&nbsp;top: 50%;<br>
&nbsp;&nbsp;&nbsp;transform: translateY(-50%);<br>
}
</p>

CSS

.div_ext { 
        height: 200px;
        position: relative;
        border: 3px solid green; 
      }

      .div_in {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        /*------------------*/
        width:80%;
        height: 100px;
        border: 3px solid red; 
      }