Javascript 如何使我的div（相对div）位于页面中心，而另一个div位于页面下方，而不是页面下方（不固定）
这里我有一个Div（图中的div1），我希望它位于页面的中心（现在我使用左边距强制它位于我自己电脑的中心位置，但当其他分辨率不同的人打开它时，它不在中心）。我尝试将每个Div设置为相对/固定/绝对/填充/边距，并在线搜索两天，但是，第1部分中的每一部分要么都崩溃了，要么就不起作用了 同时，我添加了一个文本div（div2）并希望它位于当前div（div1）的下方，它不在其下方，而是在div1下隐藏。我在网上搜索过，知道如果前面有一个相对/固定位置div，它将被忽略。所以我也只能对div2使用固定位置。我不希望它这样，我也希望它放在页面的中央 这里的主要问题是我的页面没有修复每个屏幕和中心 查看示例页面位于 大的圆是div1，其中有5个部分组成了这个圆，这就是为什么div1必须是一个相对div 大圆圈下的文本是div 2（您可以在文本页面上看到它是一张图片，我在下面的代码中将它更改为文本div） html代码：Javascript 如何使我的div（相对div）位于页面中心，而另一个div位于页面下方，而不是页面下方（不固定）,javascript,html,css,Javascript,Html,Css,这里我有一个Div（图中的div1），我希望它位于页面的中心（现在我使用左边距强制它位于我自己电脑的中心位置，但当其他分辨率不同的人打开它时，它不在中心）。我尝试将每个Div设置为相对/固定/绝对/填充/边距，并在线搜索两天，但是，第1部分中的每一部分要么都崩溃了，要么就不起作用了 同时，我添加了一个文本div（div2）并希望它位于当前div（div1）的下方，它不在其下方，而是在div1下隐藏。我在网上搜索过，知道如果前面有一个相对/固定位置div，它将被忽略。所以我也只能对div2使用固定
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><a href="http://www.angelfire.com/ns/circleofallnations/page3.html"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></a></div>
<div id= "right2" class = "text1"><a href="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></a></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2"><a href="https://www.facebook.com/circleofallnations/">Circle of All Nations</a></div>
<div id= "bottom2" class = "text2"><a href="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda</a></div>
<div id= "bottom3" class = "text2"><a href="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy - Asinabka</a></div>
<div id= "bottom4" class = "text2"><a href="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo</a></div>
<div id= "bottom5" class = "text2"><a href="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art</a></div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola@circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
<a href="http://www.circleofallnations.ca/canhome" id="line1" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |</a>>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
<a href="https://www.asinabka.com/" style="color:#FFFF00; font-family:Arial;font-size:13pt;">ASINABKA |</a>>
<a href="http://develop.gcrc.carleton.ca:8053/index.html" style="color:#FFFF00; font-family:Arial;font-size:13pt;">DIGITAL ATLAS |</a>
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
如果你简单地说“剩余利润：15%”，你怎么能期望容器自身居中呢？15%在不同的屏幕宽度上会有所不同我尝试过其他方法，如文本对齐：居中，位置：自动…但他们也没有使其居中，所以我将其更改回15%以使其至少在屏幕上居中。但这不会使其居中-请看使用flexbox将其居中。谷歌flexbox定心
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}