android chrome 上的居中块

Question

我在移动设备上显示我的网页时遇到奇怪的问题 Chrome。我有一个水平居中的块，它在桌面上显示得很好 Chrome，但在移动设备上 Chrome 它粘在页面的左边框上。

经过一番研究，我发现移动 "viewport" 与屏幕尺寸不同。因此，要居中并不是一件简单的事情。

我正在使用的简化标记：

<body>
    <div class="block">
    </div>
</body>

和 CSS:

body {
    width: 100%;
    margin: 0;
}
.block {
    position: relative;
    width: 1024px;
    height: 768px;
    background-color: red;
    top: 44px;
    margin: auto;
}

我也试过使用以下方法使块居中：

left: 50%;
margin-left: -512px;
position: absolute;

但那有同样的效果。我也尝试添加视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

这也无济于事。我的设备有 1920x1080 的硬件分辨率，它显示的页面实际宽度约为 1200 像素左右，但 "device-width" 默认为 640 像素，如果我使用多点触控缩放页面，它仍将左边框保持在初始位置。

对我来说，最好的目标是将页面固定在某个分辨率（1200 像素就可以了，我的任务不需要缩放）并且块居中。但是我没有看到将 "device-width" 设置为真实硬件像素大小并锁定缩放比例的方法...（我知道如何锁定缩放比例，但它对分辨率和居中没有帮助）。

可以轻松复制的页面示例：http://37.48.93.204/androidtest.htm

它在桌面 Chrome 上工作得很好，但在 Android Chrome 上描述了问题。

Answer 1

要在各种分辨率的设备上正确调整您的页面，您应该使用 CSS media queries。通过这种方式，您可以使元素的大小取决于屏幕大小。例如：

/* normal desktop */
.block {
    width: 1024px;
}

@media only screen and (max-width: 1023px) /* notebook */
{
    .block {
        width: 800px;
    }
}
@media only screen and (max-width: 793px) /* tablet */
{
    .block {
        width: 600px;
    }
}
@media only screen and (max-width: 479px) /* old smartphone */
{
    .block {
        width: 400px;
    }
}

关于居中，尝试欺骗精确像素是一种不好的做法。有更通用和可靠的居中方法，如基于 Table 的布局或 Flexible Boxes 模型。有关更多信息，请阅读文章 Vertical centering of elements in HTML。

Answer 2

假设你说的是水平居中：

在容器中居中的最简单方法是给它一个固定的宽度，然后使用 margin-left: auto; 和 margin-right: auto;。这将使元素在其容器中居中。

最好的方法是设置最大宽度，并在屏幕尺寸足够大时立即调整边距。

使用背景图片（水平居中）创建一个宽包装纸，并将该包装纸内的内容限制为最大 1024 像素。然后在屏幕窄于 1024px 时调整大小。

DEMO

HTML 代码示例

<html>
  <head>
    <meta name="viewport" content="width=1224">
  </head>
  <body>
    <div class="mainblock">
      <div class="topside">
        Top
      </div>
      <div class="content-wrapper">
        <div class="content">
          Content
        </div>
      </div>
      <div class="bottomside">
        Bottom
      </div>
    </div>
  </body>
</html>

CSS 代码示例

body {
  width: 100%;
  margin: 0;
}

.mainblock {
  max-width: 1024px;
  width: 100%;
  height: 768px;
  margin: 0 auto;
}

.content-wrapper {
  background: url('http://lorempixel.com/1224/768/') no-repeat 50% 0;
  display: block;
  position: relative;
  max-width: 1024px;
  padding: 0;
}

.content {
  background: salmon;
  box-sizing: border-box;
  min-height: 768px;
  padding: 0;
  max-width: 1024px;
  width: 100%;
}

.topside,
.bottomside {
  max-width: 1024px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
  .mainblock, .content-wrapper {
    max-width: 1224px;
  }

  .content {
    margin: 0 auto;
    width: 1024px;
    position: relative;
    z-index: 2;
  }

}

编辑：

同时将视口重置元标记添加到 HTML 代码的 head 部分：

<meta name="viewport" content="width=1224">

编辑 2：

创建了一个新演示 (http://codepen.io/anon/pen/dPzJPX) 并更新了初始答案。

Answer 3

每个设备和浏览器都有一个用户代理，您只能为 chrome android 浏览器制定特定规则。这是我所说的一个例子：

<script type="text/javascript">

        $(document).ready(function() {

            var userAgent = navigator.userAgent;
            var cssIosURL = '<link href="${contextPath}/css/ios.css" rel="stylesheet">';
            var cssNativeAndroidURL = '<link href="${contextPath}/css/nativeAndroid.css" rel="stylesheet">';
            var cssAndroidChromeURL = '<link href="${contextPath}/css/androidChrome.css" rel="stylesheet">';

            if (userAgent.indexOf('Mac OS') >= 0) {
                if (userAgent.indexOf('Mobile') >= 0) {
                    $('head').append(cssIosURL);
                }
            }

            if (userAgent.indexOf('Android') >= 0) {
                if ((userAgent.indexOf('Firefox') < 0) && (userAgent.indexOf('Chrome') < 0) && (userAgent.indexOf('Opera') < 0)) {
                    $('head').append(cssNativeAndroidURL);
                } else {
                    $('head').append(cssAndroidChromeURL);
                }
            }

        });

    </script>

Answer 4

我建议将您的 CSS 更改为这样的块：

.block {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

无论容器的宽度是多少，使 margin-left 等于 width 的一半。

我上面的代码将在页面上水平和垂直居中。

像这样：http://jsfiddle.net/6x3a4uaL/

刚刚在我的 Android Phone 上检查了 Chrome，它在 jsFiddle 页面上运行良好。

Answer 5

要使您的 "block" 对象居中，您可以尝试这样做：

.block {
    display: block;
    margin: 0 auto;
    width: 30em;
    height: 60em;
    background-color: red;
}

Answer 6

如果您还没有，请尝试使用 <center></center> 标签。我知道它已停产，但值得一试。另外，不要 margin: auto 尝试 margin: 0px auto.

Answer 7

CSS

body {
    width: 100%;
    margin: 0;
}
.block {
    display: flex;
    position: relative;
    width: 1024px;
    height: 768px;
    background-color: red;
    top: 44px;
    margin: auto;
}

HTML

 <div class="block">
    </div>

看看 flex 属性的 CSS

Answer 8

我看不到主体 100% 宽度的意义。不过，您应该提供更多信息或上下文。

我尝试了一些东西http://jsfiddle.net/c5afz9b1/

从正文中删除了 width: 100%;
只是为了测试，在块的两边加上边框，看看它是否居中。看起来它正在工作。
根据您的情况，尝试将 overflow: hidden 放在 body 上。

如果您提供更多信息，这将对我们有用。

Answer 9

http://jsfiddle.net/t178r76n/2/

这个 JSFiddle 是我需要你看的东西。本质上，我根据您提供的内容更改了一些代码，使其更加灵活。

现在主块是您的主要元素...

.mainblock {
    width: 1024px;
    height: 768px;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

虽然我需要你的意见......我需要知道我是在左外野还是在回家。

android chrome 上的居中块

Centering block on android chrome

html

css

android

google-chrome

center