How to expand an element but keep its position?

Question

The problem I has with this question was that when expanding a div that is positioned in the middle of a div would then make the element out of center. What makes this different from other question was that I couldn't specificity the width and height of the div. Therefore I needed a solution.

I now have the solution, thanks for the help!

I've included code to help explain the problem I am having.

var elem = document.getElementById("one");

var onload = function() {
  elem.style.left = "calc(50% - 40px)";
  elem.style.top = "calc(50% - 40px)";
}
onload();

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function () {
 elem.style.width = "200px";
  elem.style.height = "200px";
});

reset.addEventListener("click", function () {
 elem.style.width = "80px";
  elem.style.height = "80px";
});

#one {
    width: 80px;
    height: 80px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    transition: all 2s;
}

<div id="one"></div>
<button id="expand">click</button>
<button id="reset">reset</button>

pure css, no `calc()`: `#one { left: 50%; top: 50%; transform: translate(-50%, -50%); }` — Thomas, Sep 15 '19 at 19:21

score 2 · Answer 1 · answered Sep 15 '19 at 19:25

I would recommend keeping your left and right positioning at 50% with a transform of -50% on both X and Y. No more calculations or javascript necessary.

Remove your inline css added dynamically and update your css to be:

#one {
    width: 80px;
    height: 80px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    transition: all 2s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

score 1 · Answer 2 · answered Sep 15 '19 at 19:36

You don't need any JS for that, you can center an Element just with CSS inside its offset-parent:

position: absolute;
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

var elem = document.getElementById("one");

// you don't need that
// var onload = function() {
//   elem.style.left = "calc(50% - 40px)";
//   elem.style.top = "calc(50% - 40px)";
// }
// onload();

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function() {
  const size = Math.floor(Math.random() * 300) + 50;

  elem.style.width = elem.style.height = size + "px";
});

reset.addEventListener("click", function() {
 // just remove the styles.
 // fall back to what's defined in the CSS
  elem.style.width = elem.style.height = "";
});

#one {
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 50%;
  /* 
     be more precise; 
     transition all can be devastating for the performance 
  */
  transition: width 2s, height 2s;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="one"></div>
<button id="expand">resize</button>
<button id="reset">reset</button>

score -1 · Accepted Answer · answered Sep 15 '19 at 19:13

I would suggest to edit your onload function to handle dynamic width like this:

var onload = function(w) {
  elem.style.left = `calc(50% - ${w})`;
  elem.style.top = `calc(50% - ${w})`;
}

Now you can reset the position on button click event.

Example:

var elem = document.getElementById("one");

var onload = function(w) {
  elem.style.left = `calc(50% - ${w})`;
  elem.style.top = `calc(50% - ${w})`;
}
onload("40px");

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function () {
 elem.style.width = "200px";
  elem.style.height = "200px";
  onload("100px");
});

reset.addEventListener("click", function () {
 elem.style.width = "80px";
  elem.style.height = "80px";
  onload("40px");
});

#one {
    width: 80px;
    height: 80px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    transition: all 2s;
}

<div id="one"></div>
<button id="expand">click</button>
<button id="reset">reset</button>

I hope this helps.

@TeamEcko my pleasure. – Ahmed Salameh Sep 15 '19 at 19:24 — Ahmed Salameh, Sep 15 '19 at 19:24

How to expand an element but keep its position?

3 Answers3