Html 以Chrome桌面为中心的DIV，但不是Chrome mobile
Chrome是我的主要桌面浏览器。我终于学会了如何使用Html 以Chrome桌面为中心的DIV，但不是Chrome mobile,html,css,mobile,cross-browser,centering,Html,Css,Mobile,Cross Browser,Centering,Chrome是我的主要桌面浏览器。我终于学会了如何使用right:0将绝对定位的DIV水平居中；左：0。这在Chrome和Firefox中非常有效 Chrome mobile没有将我的DIV居中 一个奇怪的线索是Chrome mobile在网站右下方显示空白。我将html，body min width设置为650px，这样就可以处理右边的空白。但恐怕这只是一个创伤性援助，我没有得到一个更根本的问题。 我不确定空白是否与我的DIV不居中有关，但设置主体的最小宽度并没有解决问题。即使使用min wi
right:0将绝对定位的DIV水平居中；左：0。这在Chrome和Firefox中非常有效
Chrome mobile没有将我的DIV居中
一个奇怪的线索是Chrome mobile在网站右下方显示空白。我将html，body min width设置为650px，这样就可以处理右边的空白。但恐怕这只是一个创伤性援助，我没有得到一个更根本的问题。
我不确定空白是否与我的DIV不居中有关，但设置主体的最小宽度并没有解决问题。即使使用min width，DIV仍然不以移动设备为中心。它左对齐。。。似乎在非白色空间的范围内
更新：我怀疑这与空白有关，因为当我水平转动手机时，DIV会居中
有比我聪明的人知道发生了什么事吗
我将尝试在下面发布我的代码。不居中的DIV类设置为“明信片”：
闹鬼雄鹿县（HBC）
.明信片{
边界半径：2px2px2px2px；
高度：250px；
宽度：450px；
盒影：-3px-3px 20px#000000；
背景图像：径向梯度（圆最远侧，#FDF6D7 0px，#DBD4B5）；
}
html，正文{
最小宽度：650px；
}
$（“#BtnWeather”）。单击（函数（）{
$（“#Weather”）.addClass（“WeatherDegree0”）.removeClass（“WeatherDegree45 WeatherDegree45 Push”）；
$（“#太阳能”）.addClass（“太阳能绿色45”）.removeClass（“太阳能绿色0太阳能绿色45”）；
$（“#Lunar”）.addClass（“LunarDegreeN45Push”）.removeClass（“LunarDegree0 LunarDegreeN45”）；
});
$（“#BtnLunar”）。单击（函数（）{
$（“#Weather”）.addClass（“WeatherDegree45Push”）.removeClass（“WeatherDegree0 WeatherDegree45”）；
$（“#Solar”）.addClass（“SolarDegree45”）.removeClass（“SolarDegree0 SolarDegreeN45”）；
$（“#Lunar”）.addClass（“LunarDegree0”）.removeClass（“LunarDegreeN45 LunarDegreeN45 push”）；
});
$（“#btonsolar”）。单击（函数（）{
$（“#Weather”）.addClass（“WeatherDegree45”）.removeClass（“WeatherDegree0 WeatherDegree45 Push”）；
$（“#Solar”）.addClass（“SolarDegree0”）.removeClass（“SolarDegree45 SolarDegreeN45”）；
$（“#Lunar”）.addClass（“LunarDegreeN45”）.removeClass（“LunarDegree0 LunarDegreeN45Push”）；
});
更新：这是我网站的链接：嗯，我想我找到了答案。我将容器div设置为position:relative，然后将内容div设置为position:absolute。我不能说当我解决它的时候我知道我在做什么，但我想我知道什么现在起作用了。将来，我可能会尽可能多地使用相对定位，直到我必须精确定位容器中的内容。可能与最小宽度：650px在#NavContent
中，因为该宽度大于大多数手机的屏幕分辨率。我应该补充一点，我使用的是HTC One M7，我相信它有720屏幕。
<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>