Tiggles ツ of Speak Creative
8/20/2019 - 7:20 PM

Non-Blurry absolute centered text

using transform: translateX(-50%) on div will blur text within. Instead, use this margin trick. Great for working w relative variables.

ie: http://cloud.madebyspeak.com/b51796

html.html
content_copyfile_download
<style>
  #staff-modal {
    position: fixed;
    left: 50%;
    width: 90vw;
    max-width: 100%;
    height: 500px;
  }
</style>

<div id="staff-modal">
   <div class="close-modal"></div>
   <div class="image"></div>
   <div class="info"></div>
</div>

<script>
  jQ171(document).ready(function($) {
   $(window).on("resize load", function() {
      $("#staff-modal").css("margin-left", "calc(-"+($("#staff-modal").outerWidth())+"px/2)");
   });
});
  
</script>