Question

我正在尝试使用JQuery将此div居中，以便其响应，但我似乎无法做到这一点

function resize() {
  var h = $(window).height();
  var w = $(window).width();
  var ct = $("#content");
  ct.height(h / 2.5);
  ct.width(w / 2.5);
  ct.css("left", w / 2);
  ct.css("right", w / 2);
  ct.css("top", h / 2);
  ct.css("bottom", h / 2);
}
resize();
$(window).on("resize", function() {
      resize();
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #content {
    border: 1px black solid;
  }
</style>
<div id="content"></div>

它根本不居中我不知道如何居中并仍然与移动设备兼容

Answer 1

要使<div>居中，可以使用以下代码：

#content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  min-height: 20px;
  min-width: 20px;
}

<div id="content"></div>

不使用任何Javascript。

Answer 2

这样就不用居中放置项目了，只需将其变成flexbox

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  min-height: 100vh;
}

.wrapper .child {
  margin: auto;
}

<div class="wrapper">
  <div class="child">
    hello
  </div>
</div>

可以安全使用：https://caniuse.com/#feat=flexbox

Answer 3

建议您完全不使用任何jQuery / JS将元素居中。

#element {
  position: absolute;
  top: 50%;  /* aligns element's top edge to 50% from the top edge of the page */
  left: 50%; /* aligns element's left edge to 50% from the left edge of the page */
  transform: translate(-50%, -50%); /* values are relative to the element's width and height */
}

如果您设置了right和bottom，您不是就需要设置top和left。如您所见，下面的代码就足够了。

div {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
}

<div></div>

值得注意的是，如果父级为absolute，则可以使用position: relative将元素置于其他元素的中心。例如...

#parent {
  width: 30px;
  height: 30px;
  position: relative;
  top: 25px;
  left: 75px;
  background: black;
}

#child {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: lime;
}

<div id='parent'>
  <div id='child'></div>
</div>

Answer 4

取决于中心的意思。这么多因素。您可能要在移动设备上执行此操作。

*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
#test{
   width:100px; height:20px; margin-top:calc(50% - 10px); margin-left:calc(50% - 50px);
}

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='test'>test</div>
</body>
</html>

此设计应在其他任何Element内部进行测试。请牢记calc，相应地更改宽度和高度。

如何在页面中间放置此中心？

4 个答案: