HTML and CSS tips "How flexbox can help to solve the text blur problem"

github logo Updated on ・1 min read

When you use the transform property to center the text block this can lead to blurry text in the Chromium browsers. So I recommend you use the margin: auto and display: flex for solving of this task.

HTML

<div class="modal">
  <div class="modal__info">
    <p>some text</p>
  </div>
</div>

Don't do it

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.modal__info {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You can use it instead

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
}

.modal__info {
  width: 80%;
  margin: auto
}

P.S: I share tips, ideas, examples of my private projects on my Patreon profile. Are you interested? Join to us! 👉 https://www.patreon.com/melnik909

twitter logo DISCUSS
Classic DEV Post from Jun 29 '18

Getting started with Slim PHP framework by building a very simple MVC/OOP app

Take your first steps using Slim PHP framework to build a farm!

Stas Melnikov profile image