html - 为什么我的底部 div 不以 android 为中心，而是在显示器上显示？

Question

我环顾四周，似乎找不到解决问题的办法。

为什么底部的两个 div 在 Windows 8 上看起来完美地左右两半，但在我的 android s5 上却没有居中？ http://danny4help.com/

#grad4_left img {
    height: 100%;
    width: 100%;
    border-radius: 10px 0px 0px 10px;
}

#grad4_right {
    z-index: inherit;
    height: 700px;
    background-color: #F1EEF7;
    top: 705px;
    width: 50%;
    left: 50%;
    text-align: center;
    font-size: 80px;
    line-height: 40px;
    color: #4A4A4A;
}

.grad#grad4_left {
    z-index: inherit;
    height: 700px;
    background-color: black;
    top: 705px;
    right: 50%;
    color: #4A4A4A;
    width: 50%;
}

Answer 1

您有几个具有固定像素宽度的 div，位于错误居中的 div 的上方和下方。这些 div 比 body 宽，因此视口(viewport)会自动扩展以显示这些元素的整个宽度，使您的 div 看起来好像没有正确居中。只需将太宽的 divs 的 width 的像素单位替换为视口(viewport)单位的任一百分比，就可以了(例如，.grad 的宽度为 1280px。将其更改为 100vw)。要进行快速而肮脏的修复，请将此 block 添加到顶部:

* {
    max-width: 100vw;
  }

编辑:其他一些答案建议您不要在响应式布局中使用绝对定位。使用 position: absolute 实际上是可以的，只要您使用相对单位(例如，%、em、vw) 而不是固定单位(例如，px、in、pt)。