JSFiddle - React, Tailwind, and code Playground

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<div class="modalhost">
<div class="yourdiv">

</div>
</div>

CSS

.modalhost{
  position:fixed;
  width:100%;
  height:100%;
  background:black;
  opacity:0.6;
}
.yourdiv{
  width:200px;
  height:300px;
  background:green;
  position:absolute;
  top:24%;
}

JavaScript

$(document).ready(function(){
	var width = $('.yourdiv').width();
  var left = ($('.modalhost').width() - width)/2;
  $('.yourdiv').css('left',left)

})