使用 'position: fixed' 时如何从中心放大 div 元素？答案

【问题标题】：How can I enlarge a div element from it's center when using 'position: fixed' ?使用 'position: fixed' 时如何从中心放大 div 元素？
【发布时间】：2015-12-08 21:20:10
【问题描述】：

我在 div 标签列表中有一个固定大小的 div 元素（100% 宽度，用于移动网站）。点击后，我想让它全屏显示，所以我添加了一个具有以下属性的类： height: 100vh; width: 100%; position: fixed; top: 0px; left: 0px; transition: all 0.5s ease-in-out;.

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

我怎样才能使从固定大小到 100% w/h 的过渡效果，以便 css 转换将从元素的中心发生，从侧面（上/下）推动其他元素？

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

【问题讨论】：

嗨，欢迎来到堆栈溢出。请您添加您已经拥有的html和css，因为您需要创建一个minimal, complete, verifiable example
你能发一个 JSFiddle 吗？
我把它放在这里了：jsfiddle.net/k6cvtbzw
我认为您需要使用 jquery 而不是 css 来制作动画
@TibiBuzdugan 检查my answer

标签： jquery html css

【解决方案1】：

使用 css zoom 属性

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

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

【讨论】：

我试过这个方法，但它也会缩放内容，这不是我想要的。我只想缩放容器，使其适合整个屏幕。

【解决方案2】：

在 .banner 下添加这些{}

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

以及#banner.zoom 下的这些{}

transform: translateX(0);

这里是JSFiddle

【讨论】：

谢谢。我试过这个，但它更像是一个硬编码的解决方法。它仅适用于演示案例（即：如果框位于页面顶部）。因为我想在元素列表中使用它，所以我不能使用这种方法，因为它在屏幕上的原始位置是未知的。也许我可以使用 jquery 找到它并相应地编辑 css..我会尝试一下
@TibiBuzdugan 检查更新的答案。您可以将它与任何宽度/高度的 div 一起使用。
@TibiBuzdugan 制作外部 div position: relative 也将帮助您定位它们。