中心div使用javascript / jquery

Question

我知道用css垂直和水平定位div中心的方法很少。但是对于旧的电话支持，我必须用js来做。

http://jsfiddle.net/ncsy9khf/1/

div{
    width:50px;
    height:50px;
    background:orange;
    position:relative;
    margin: 0 auto;
    display:block;
}

如何进行计算以了解我的保证金顶部的值是什么，以使框中心居中？

Answer 1

这是我最喜欢的方式：

position:relative;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);

这5行可以垂直和水平几乎任何

Fiddle

<小时/> 我从this article

学到了这个方法

Support tables here

您可以期待95％的用户完美地完成这项工作

<小时/> 更友好的浏览方式：

position:relative;
top: 50%;

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

left: 50%;

-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);    
transform: translateX(-50%);

Friendly Fiddle

Answer 2

只需使用纯CSS：

＆＃13;

＆＃13;

.parent {
  position: relative;
  width: 160px;
  height: 160px;
  background: #eee;
}

.centered {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #FF9800;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

＆＃13;

<div class="parent">
  <div class="centered"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

父元素必须拥有position:relative;（您计划将div设为中心）

此外，无需将display:block;添加到div元素 - 默认情况下它们是块元素