css - how to set child Div with 100vw of device width when parent div having width :80vw -


.parent {    width: 80vw;    height: 200px;    background-color: red;    margin: 0 auto;    text-align: center;  }    .child {    width: 100vw;    height: 100px;    background-color: blue;  }
<div class="parent">    <div class="child"></div>  </div>

how can align center child div when parent div having lesser width child? how set child div 100vw of device width when parent div having width 80vw?

if you're trying do, center parent, , center child using position relative, , negative left value.

.parent {    width: 200px;    height: 200px;    background-color: red;    margin: 0 auto; /* center parent in screen */  }    .child {    position: relative;    width: 100vw;    height: 100px;    background-color: blue;    /* center child using negative left */    /* left: calc(50% - 50vw); */    /* or */    left: 50%;    transform: translatex(-50%);  }    body {    margin: 0;  }
<div class="parent">    <div class="child"></div>  </div>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -