JQuery 移动按钮 - 从中心的绝对位置？

Question

我正在尝试在 JQuery 移动版中创建一些东西，但是我需要能够从中心放置一个按钮。现在，按钮位于左上角，因此如果我调整 window 的大小，一切都会严重偏离中心。

<body>
    <button>Button</button>
    <div />
</body>

div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}

button {
position: absolute;
top: 200px;
left: 200px;
}

Fiddle: http://jsfiddle.net/chpt3x1v/4/ 我无法让 JQM 在 JSFiddle 中工作（如果它不显示大量错误，我不知道该怎么做），所以我只使用了一个常规按钮，但同样的前提也适用。

两张图片：如您所见，它完全偏离了中心。

Answer 1

首先，您的代码没有开始标记。其次，您需要将父元素，即 div，定位为相对的。

第三，您已使用相同的尺寸将按钮放置在 div 的最边缘。尝试：

<body>
    <div>
    <button>Button</button>
    <div />
</body>

div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}

button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}

z-index 属性将允许按钮覆盖 div。

Answer 2

更新的答案：

需要给按钮设置宽高，然后设置top margin为高度的负二分之一，left margin为宽度的负二分之一：

Updated DEMO

<div class="thediv"></div>        
<button data-role="none" class="theButton">Button</button>

.thediv {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: black;
}

.theButton {
  position: fixed; /* or absolute */
  top: 200px;
  left: 200px;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
}

原始答案：

您可以使用固定定位和负边距使其居中：

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        <div class="centered"><button>Button</button></div>
    </div> 
</div>  

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  background-color: black;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

.centered button {
    margin: 0 !important;
    height: 100%;
}

Updated FIDDLE

JQuery 移动按钮 - 从中心的绝对位置？

JQuery Mobile Button - Absolute position FROM center?

html

css

jquery-mobile

JQuery 移动按钮 - 从中​​心的绝对位置？

JQuery Mobile Button - Absolute position FROM center?

html

css

jquery-mobile

JQuery 移动按钮 - 从中心的绝对位置？