如何让我的 div（一个相对的）在页面的中心，另一个 div 在它下面，而不是在它下面（没有让它固定）答案

【问题标题】：How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)如何让我的 div（一个相对的）在页面的中心，另一个 div 在它下面，而不是在它下面（没有让它固定）
【发布时间】：2020-08-18 01:34:15
【问题描述】：

这里我有一个 Div（图中的 div1），我希望它在页面中居中（现在我使用 margin-left 将它强制在我自己电脑的中心位置，但是当其他人打开不同分辨率的屏幕时它，它不在中心。）我已经尝试制作每个relative/fixed/absolute/padding/margin，并在网上搜索了两天，但是div1中的每个部分都崩溃了，或者它不起作用。

同时，我添加了一个文本 div(div2) 并希望它在当前 div(div1) 的下方，它没有在它下方，它隐藏在 div 1 下。我在网上搜索并知道如果在它之前有一个相对/固定位置的 div，它将执行此操作，它将被忽略。所以我也只能对 div 2 使用固定位置。我不希望它出现。而且我还希望它转到页面的中心。

这里的主要问题是我的页面没有固定每个屏幕和中心。

在http://circleofallnations.ca/查看示例页面大圆圈是 div1，其中 5 个部分组成了那个圆圈，这就是为什么 div1 必须是一个相对 div

大圆圈下的文字是div 2。（你可以看到它是短信页面的图片，我在下面的代码中将其更改为文本div。）

Here is the example figure

html代码：

<!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>

这里是css表格

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;
}

js代码（不太重要）

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";
}

请帮忙，提前谢谢。

【问题讨论】：

如果您简单地说 margin-left: 15%，您希望容器如何居中？ 15% 在不同的屏幕宽度上会有所不同
我尝试过其他方法，例如 text-aligned:center, position: auto...但它们也没有使其居中，所以我将其改回 15% 以使其至少居中我的屏幕。
但这不会使它居中 - 看看使用 flexbox 来居中它。谷歌 flexbox 居中

标签： javascript html css

【解决方案1】：

你好！我认为您应该尝试 margin: auto 属性。首先，从容器中删除 position:relative 和 margin left 属性。然后为您的容器添加宽度或高度（根据您的需要），并为其添加 margin:auto 。这是一个示例代码：

.container {
    display: block;
    width: 500px;
    height: auto;
    margin: auto;
    background-color: black;
}

这肯定会居中对齐。如果你想让你的 div 转到下一行，只需添加 display: block;财产给它。如果它隐藏在 div1 下，添加 z-index: +1 属性。尝试所有这些修改，如果它解决了您的问题，请告诉我。

【讨论】：