Why the div is not centred-CodePudding

im triying to center this element in the screen, and also when i hover.

In my example below, the div is not centred, even when i hover it knowing that i made the transform 50% and top/left too, that's what i use uselly to center an element.

* {
  box-sizing: border-box;
}
body {
position: relative }

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  
  transform: scale(.2) translate(-50%, -50%);
  position: absolute;
      top: 50%;
    left: 50%;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
 
<div ></div>

</body>
</html>

CodePudding user response：

the bug is in :hover selector because without translate() inside the transform, you basically reset it to 0 which isn't what you want. because it will forget what was before and override it.

here is a simple solution here:

❌

.zoom:hover {
  transform: scale(1.5); 
}

✅

.zoom:hover {
  transform: 
     scale(1.5)
     translate(-50%, -50%); /* add this */
}

here is a simple explanation here:

Modern solution (less code):

using CSS grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid

with place-items it will center it automatically without the need for any transform or position... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

also, you don't have to 0.2 the scaling at the start, just start at scale(1) and then make it bigger with a bigger scale in hover like 4 for example. (so it won't create that bug at the start of from 200px to 0.2scale transition without any hover)

however, if you want to make the CSS work also in IE and older browsers then is good to use position, and translate, top, left...

but your users are using a modern browser, so for readability and making a simpler use of flexbox or grid can be a great idea.

for any further info use https://caniuse.com (for example grid is 95% supported by any browser from 2020 one, and in chrome from 2017)

here the CSS grid solution

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
}

.zoom {
  background-color: green;
  width: 50px;
  height: 50px;
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(4);
}

<body>
  <div ></div>
</body>

CodePudding user response：

Keep in mind the order of the transforms determines how the element appears. You first move the element top: 50%; left: 50%;, which puts it in the bottom right quadrant. Then you make it smaller transform: scale(0.2) and then you move it left by 50% of its now smaller size translate(-50%, -50%).

By placing the translate first, the element is centered before becoming smaller. Remember to also include the translate(-50%, -50%) when you increase the size, as the consequent translates will overwrite the current one, not add to it.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
position: relative }

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  
  transform: translate(-50%, -50%) scale(.2);
  position: absolute;
      top: 50%;
    left: 50%;
}

.zoom:hover {
  -ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
  -webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
  transform: translate(-50%, -50%) scale(1.5); 
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
<body>
 
<div ></div>

</body>
</html>

CodePudding user response：

Put translate(-50%, -50%) before scale(0.2). Also, you need to include the translate(-50%, -50%) in your hover rule, otherwise it scales, but resets the translate part to its default.

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  position: relative
}

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: translate(-50%, -50%) scale(0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.zoom:hover {
  -ms-transform: translate(-50%, -50%) scale(1.5);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%) scale(1.5);
  /* Safari 3-8 */
  transform: translate(-50%, -50%) scale(1.5);
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div ></div>

</body>

</html>