更改节目并隐藏元素的位置

Question

我有几个按钮。点击后，他们应该隐藏并显示HTML元素。它们工作正常但是当我点击它们时，HTML元素的隐藏和显示位置是左上角。我希望它显示和隐藏中心而不是左上角。

这是代码。

HTML：

<div class="section">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<button class="button1">Click to hide the section!</button>
<button class="button2">Click to show the section!</button>

jQuery的：

$(".button1").click(function(){
  $(".section").hide("200");
});

$("button2").click(function(){
  $(".section").show("200");
});