DIV 以 Chrome 桌面为中心，而不是 Chrome 移动版答案

【问题标题】：DIV centered in Chrome desktop, but not Chrome mobileDIV 以 Chrome 桌面为中心，而不是 Chrome 移动版
【发布时间】：2015-07-15 16:18:24
【问题描述】：

Chrome 是我的主要桌面浏览器。我终于学会了如何使用right:0; left:0;将绝对定位的 DIV 水平居中。这在 Chrome 和 Firefox 中效果很好。

Chrome 移动设备无法将我的 DIV 居中。

一个奇怪的线索是，Chrome 移动版在网站下方和右侧显示空白。我将 html 的 body min-width 设置为 650 像素，这会处理右侧的空白区域。但恐怕这只是一个我没有得到的更基本问题的创可贴。

我不确定空白是否与我的 DIV 不居中有关，但设置正文的最小宽度并不能解决问题。即使使用最小宽度，DIV 仍然不以移动为中心。它向左对齐......似乎在非空白区域的范围内。

更新：我怀疑它确实与空白有关，因为当我水平转动手机时，DIV 确实居中。

有比我聪明的人知道发生了什么吗？

我将尝试在下面发布我的代码。不居中的 DIV 的类设置为“PostCard”：

<html>
<head>
    <title>Haunted Bucks County (HBC)</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>
    <!--<script type="text/javascript" src="jquery.animate-shadow.js"></script>-->
    <!--<style><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"></style>-->

    <?php
        $contents=file_get_contents("http://www.hauntedbuckscounty.com/style_theme.html");
        echo $contents;
    ?>

    <?php
        $contents=file_get_contents("http://www.hauntedbuckscounty.com/Tools/Carousel.html");
        echo $contents;
    ?>
    <style>
    .PostCard {
        border-radius: 2px 2px 2px 2px;
        height: 250px;
        width: 450px;
        box-shadow: -3px -3px 20px #000000;
        background-image:radial-gradient(circle farthest-side,#FDF6D7 0px,#DBD4B5);
    }
    html, body {
        min-width:650px;
    }
    </style>
</head>
<body style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;">
<div id="Viewport" style="height:100%; width:100%;
                          border:0px #FFAA00 solid;
                          margin:0px 0px 0px 0px;
    background-image:linear-gradient(black 400px, black 15%, #0E0E0F 15%, #0E0E0F, #1B1B1C);">

    <div id="Header" style="height:50px; width:100%; min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#1B1B1C 200px,#0E0E0F);
                            ">
    </div>

    <div id="Content" style="height:350px; width:100%; min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#2B2D2E 200px,#1B1B1C);
                            ">
        <div class="PostCard"
             style="position:absolute;
                    margin:30px auto 0px auto;
                    right:0;left:0;
                    border:0px #FFAA00 solid;"> <!-- SETTING "right:" AND "left:" TO "0" HORIZONTALLY CENTERS ABSOLUTELY POSITIONED ELEMENTS! -->

        </div>
    </div>

    <div id="NavContent" style="height:50px; width:100%;min-width:650px;
                            border:0px #FFAA00 solid;
                            margin:0px 0px 0px 0px;
                            background-image:radial-gradient(circle farthest-side,#1B1B1C 200px,#0E0E0F);
                            ">
    </div>


</div>




<script type="text/javascript">

    $("#BtnWeather").click(function() {
        $("#Weather").addClass("WeatherDegree0").removeClass("WeatherDegree45 WeatherDegree45Push");
        $("#Solar").addClass("SolarDegreeN45").removeClass("SolarDegree0 SolarDegree45");
        $("#Lunar").addClass("LunarDegreeN45Push").removeClass("LunarDegree0 LunarDegreeN45");
    });

    $("#BtnLunar").click(function() {
        $("#Weather").addClass("WeatherDegree45Push").removeClass("WeatherDegree0 WeatherDegree45");
        $("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0 SolarDegreeN45");
        $("#Lunar").addClass("LunarDegree0").removeClass("LunarDegreeN45 LunarDegreeN45Push");
    });

    $("#BtnSolar").click(function() {
        $("#Weather").addClass("WeatherDegree45").removeClass("WeatherDegree0 WeatherDegree45Push");
        $("#Solar").addClass("SolarDegree0").removeClass("SolarDegree45 SolarDegreeN45");
        $("#Lunar").addClass("LunarDegreeN45").removeClass("LunarDegree0 LunarDegreeN45Push");
    });

</script>


</body>
</html>

更新：这是我网站的链接：Why you no center on mobile?

【问题讨论】：

可能与#NavContent 中的min-width:650px; 相关，因为该宽度大于大多数手机的屏幕分辨率。
我应该补充一点，我使用的是 HTC One M7，我相信它有一个 720 的屏幕。

标签： html css mobile cross-browser centering

【解决方案1】：

好吧，我想我想通了。我将容器 DIV 设置为 position:relative，然后将内容 DIV 设置为 position:absolute。我不能说当我解决它时我知道我在做什么，但我想我现在知道什么是有效的。将来，我可能会尽可能地使用相对定位，直到我必须在容器中精确定位内容。

【讨论】：