JSFiddle - React, Tailwind, and code Playground

by Cliff Burton

HTML

<div class="bd_container">
  <div id="bigdiv1">
    <strong>Div 1</strong>
    <br /> With static dimensions and centered
  </div>
</div>

<div class="bd_container">
  <div id="bigdiv2">
    <strong>Div 2</strong>
    <br /> With dinamic dimensions and centered
  </div>
</div>

CSS

#bigdiv1 {
  position: absolute;
  height: 200px;
  width: 200px;
  background: blue;
  text-align: center;
  left: -100px;
  top: -100px;
  padding: 5px;
}

.bd_container {
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  left: 50%;
}

#bigdiv2 {
  position: absolute;
  background: orange;
  padding: 5px;
  text-align: center;
}

JavaScript

var d2_width = parseInt($("#bigdiv2").css("width")) / 2;
var d2_height = parseInt($("#bigdiv2").css("height")) / 2;

$("#bigdiv2").css({
  "left": "-" + d2_width + "px",
  "top": "-" + d2_height + "px"
});