CODEWITHSUNDEEP
css
Max Koretskyi
Max Koretskyi

Reputation: 105499

workaround for hv length units

I'm using top: 50vh to always position my image in the center of the screen regardless of the screen size. Now I've discovered that some old webkit browsers do not support this type of length unix. What is the best workaround?

Here is my setup:

.icon-preloader-xs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: rgba(255, 255, 255, 0.5);
  background-image: url('../resources/img/icon-preloader-xs.gif');
  background-repeat: no-repeat;
  background-position: center 50hv;
}

Upvotes: 0

Views: 936

Answers (1)

Sampsa
Sampsa

Reputation: 711

I recommend this method that is not based on hv unit. Image is assumed to be 100px by 100px square.

You can also use percentages or other relative values instead of pixels. You can always calculate this if you are using Sass, or just use Javascript to set the margins dynamically.

position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

Demo: http://jsfiddle.net/4zy63m9k/2/

Upvotes: 1

Related Questions