Floating box

Floating box.markdown

Floating box

A Pen by peccu on CodePen.

License.

index.html

<div style='height: 600px'></div>
test
<div style='height: 600px'></div>
test
<div class='box' id='box'>
  <div id='content'>
    centered content<br>
    centered content<br>
    centered content<br>
    centered content
  </div>
</div>

script.js

var marginWidth = 50;
var h = document.getElementById('content').offsetHeight;
document.getElementById('box').style.height = (h + marginWidth) + 'px';

var marginHeight = 80;
var w = document.getElementById('content').offsetWidth;
document.getElementById('box').style.width = (w + marginHeight) + 'px';

style.css

.box{
  color: white;
  background-color: #a9a9a9;
  /* centering in window */
  margin: auto;
  /* centering in page */
  justify-content: center;
  /* abusolute position */
  position: fixed;
  /* set origin to center */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* for contents in .box*/
  display: flex;
  /* vertical center */
  align-items: center;
}