盒子以显示器为中心，但不在平板电脑上

Question

我有以下HTML和CSS在浏览器上正常工作。但是，当我从平板电脑看它时（它将在一个phonegapp应用程序中）。盒子向右和向下倾斜。

这是在PC上：

这是在平板电脑上：

HTML :(使用引导程序）

<div id="login" class="loading xpad">
    <div class="centrediv"><center><h2>Test</h2></center><br/>
        <div class="row">
            <div class="container">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="pincode">Username</label>
                        <input style="width:550px" ng-model="username" class="form-control" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <label for="pincode">Password</label>
                        <input style="width:550px" type="password" ng-model="password" class="form-control" placeholder="Password">
                    </div>
                    <a ng-click="doLogin()" style="width:550px" class="xpad btn btn-block btn-success">Login</a><br />
                </div>
            </div>
        </div>

    </div>
</div>

CSS：

.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* Transparent Overlay */

.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
  position: absolute;
  width: 600px;
  background-color: white;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.xpad{
  width: 90%;
}

Answer 1

我一直使用margin-left和margin-right来居中。

margin-left: auto;
margin-right: auto;

现在我做的主要是后端，并没有真正了解CSS，所以可能有更好的方法。希望它的帮助。

Answer 2

- 尝试将相对位置：

.centrediv {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%)
  -moz-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)
  transform: translate(-50%, -50%);
  width: 600px;
  background-color: white;
}

- 然后在翻译属性上添加前缀并删除负边距，这绝对没必要。

Answer 3

添加负边距 - 左

.centrediv {
  position: absolute;
  width: 600px;
  background-color: white;
  top: 50%;
  left: 50%;
  margin-left: -300px;
}

<强> DEMO HERE