使用"位置：固定"时，如何从其中心放大 div 元素？

Question

我在div标签列表中有一个固定大小的div元素（100%宽度，在移动网站上使用）。点击后，我想让它全屏显示，所以我添加了一个具有以下属性的类：CCD_ 1。

问题是css转换从固定位置（左上角）的原点开始。

我如何使固定大小到100%w/w的转换效果，使css转换从元素的中心发生，从侧面（上/下）推动其他元素？

如果没有position:fixed; top:0px; left:0px;，转换会自然发生（从div的中心），但它只会向下推动以下元素，而不会将屏幕集中在全屏div上。

Answer 1

使用css zoom属性

CSS中的缩放属性允许您缩放内容

var zoomFactor = 100;
function largeMe() {
  zoomFactor += 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}
function smallMe() {
  zoomFactor -= 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}

#center {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #FFF;
  padding: 10px;
  border: 5px solid #CCC;
  z-index: 200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

<center id='center'>
  ...elements
</center>
<button type='button' onclick='largeMe()'>
  Zoom In
</button>
<button type='button' onclick='smallMe()'>
  Zoom Out
</button>

Fiddle here

Answer 2

将这些添加到.banner｛｝下

position: absolute;
left: 50%;
transform: translateX(-50%);

以及这些在#banner.zoom｛｝下

transform: translateX(0);

这是JSFiddle