Question

单击按钮时，我需要在屏幕中间垂直放置元素，无论浏览器的高度如何调整，它都将始终位于中间。

 <html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <button id="button">click me</button>
    <div id="element">balah</div>
    </html>


<style>
#element{
    position: fixed;
    color: red;
}
</style>

我试过了：

<script>
$("#button").click(function(){
    $('#element').css('margin-top',$(window).innerHeight()/2);

})
</script>

Answer 1

你需要在屏幕上计算位置，同时考虑元素......

＆＃13;

function FixDivCtrl() {
  var btn = $('#test');
  var target = $('#element');
  
  btn.click(function() {
    var coords = {
      "margin-top": target.height() / -2,
      "margin-left": target.width() / -2,
      "position": "fixed",
      "left": "50%",
      "top" : "50%"
    };
    target.css(coords);
  });
}

jQuery(document).ready(FixDivCtrl);

＆＃13;

div {
  background-color: red;
  width: 50px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test">Make it Fixed</button>

<div id="element"></div>

＆＃13;

Answer 2

创建一个cuss类，其中Top，l，r，b设置为0px，margin：auto和position fixed。

未经测试，但您可以使用addClass和removeClass添加新的cuss类。

例如： $（您的元件）.addClass（＆＃34;中心＆＃34）;

div.center {
  background-color: red;
  width: 50px;
  height: 50px;
  Top:0px;
  left:0px;
  right:0px;
  Bottom:0px;
  Position:fixed;
  Margin:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test">Make it Fixed</button>

<div id="element"></div>

Answer 3

不需要使用JS，这可以用纯CSS完成;

.fixed {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Javascript：显示屏幕中间的元素不能与固定位置一起使用

3 个答案: