Positioning an object on screen with a margin

by Ravindra Athreya

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/calc -->

<div class="banner"><span>This is a banner!</span></div>

<div class="box">
    <p>Test</p>
</div>

CSS

.banner {
  position: absolute;
  left: 5%;                 /* fallback for browsers without support for calc() */
  left: calc(40px);
  width: 90%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);
  height: calc(100% - 50%);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

.banner>span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.box{
  border:1px dotted tomato;
  display: flex;
  justify-content: center;
  align-items: center;
}