Как мне сохранить div в позиции при динамическом изменении размера border-width / div?

Question

Я работаю над проектом, в котором мне нужен элемент div с фиксированными координатами (скажем, центр x и центр y) при изменении ширины границы, ширины или высоты div.

Я уже пробовал использовать позицию: абсолютные, левые, верхние координаты, но div смещается от своей позиции при увеличении / уменьшении размера границы div, размера div

var div = document.getElementsByClassName('center')[0];
function fn(){
    div.style.borderWidth = '10px';
    div.style.borderColor = 'yellow';
}

function fn2(){
    div.style.borderWidth = '1px';
}

.center {
    position: fixed;
    left: 100px;
    top: 200px;
    width: 100px;
    height: 100px;
    display: table-cell;
	  border-radius: 50%;
    padding: 70px;
    border: 3px solid green;
    text-align: center;
    color: white;
    background: black;
    transition: border-width 1s, border-color 1s ease;
}

<div class="center" onclick="fn()">
  <p>I am vertically and horizontally centered.</p>
</div>
<button onclick="fn2()">Click</button>

Ожидаемые результаты должны заключаться в том, что div остается в заданных координатах центра и все еще динамически меняет свой размер.

Answer 1

Вы можете центрировать ваш div по вертикали и горизонтали с абсолютным позиционированием или без него, используя свойства flex

Это гарантирует, что этот div не изменит позицию при изменении размера

var div = document.getElementsByClassName('center')[0];
function fn(){
    div.style.borderWidth = '10px';
    div.style.borderColor = 'yellow';
}

function fn2(){
    div.style.borderWidth = '1px';
}

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    width:100%;
}
.center {
    position: fixed;
    width: 100px;
    height: 100px;
    display: table-cell;
	  border-radius: 50%;
    padding: 70px;
    border: 3px solid green;
    text-align: center;
    color: white;
    background: black;
    transition: border-width 1s, border-color 1s ease;
}

<button onclick="fn2()">Click</button>
<div class="parent">
<div class="center" onclick="fn()">
  <p>I am vertically and horizontally centered.</p>
</div>
</div>