按钮控制div的收缩 按钮在div中居中

按钮控制div的收缩，可以通过JavaScript来实现。我们需要定义一个按钮和一个div元素，并为按钮绑定一个点击事件。当点击按钮时，我们可以通过改变div元素的display属性来实现收缩和展开的效果。

示例代码如下：

HTML部分：

<button id="toggleBtn">收缩/展开</button>
<div id="content">这是要收缩的内容</div>

JavaScript部分：

var toggleBtn = document.getElementById("toggleBtn");
var content = document.getElementById("content");
toggleBtn.addEventListener("click", function() {
  if (content.style.display === "none") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

在上述代码中，我们首先通过getElementById方法获取了按钮和div元素的引用，并将其分别赋值给toggleBtn和content变量。接着，我们使用addEventListener方法为按钮绑定了一个点击事件，当按钮被点击时，会执行回调函数。

在回调函数中，我们使用了if语句来判断当前div元素的display属性值。如果display属性值为"none"，表示div元素当前是隐藏的，我们将其display属性值设置为"block"，使其显示出来；如果display属性值不为"none"，表示div元素当前是显示的，我们将其display属性值设置为"none"，使其隐藏起来。

这样，当我们点击按钮时，就可以实现div的收缩和展开效果。

除了使用display属性来控制div的显示和隐藏外，我们还可以使用其他CSS属性和动画效果来实现更加复杂的收缩和展开效果。例如，可以使用height属性和transition属性来实现平滑的收缩和展开动画。

示例代码如下：

HTML部分：

<button id="toggleBtn">收缩/展开</button>
<div id="content">这是要收缩的内容</div>

CSS部分：

#content {
  height: auto;
  overflow: hidden;
  transition: height 0.5s;
}

JavaScript部分：

var toggleBtn = document.getElementById("toggleBtn");
var content = document.getElementById("content");
toggleBtn.addEventListener("click", function() {
  if (content.style.height === "0px") {
    content.style.height = "100px";
  } else {
    content.style.height = "0px";
  }
});

在上述代码中，我们通过CSS的height属性和transition属性来实现了平滑的收缩和展开效果。我们将div元素的height属性值设置为"auto"，并将overflow属性值设置为"hidden"，这样当div元素的高度发生变化时，超出部分会被隐藏起来。然后，我们通过transition属性来定义了一个过渡效果，使div元素的高度变化时有一个平滑的过渡动画。

在JavaScript部分，我们使用了if语句来判断当前div元素的height属性值。如果height属性值为"0px"，表示div元素当前是收缩状态，我们将其height属性值设置为"100px"，使其展开；如果height属性值不为"0px"，表示div元素当前是展开状态，我们将其height属性值设置为"0px"，使其收缩起来。

通过以上示例代码，我们可以实现通过按钮控制div的收缩和展开，并且可以通过CSS属性和动画效果来实现更加丰富的效果。这样的功能在网页设计中常常用于实现折叠菜单、展开内容等交互效果，提升用户体验。