CSS - 将div放在另一个div内（非嵌套）

时间：2018-04-09 19:34:41

标签： html css center

我有10个非嵌套的div元素，每个元素的大小都在减小。在CSS文件中，它们都设置为“position：absolute”。它们最终在彼此内部，这是我想要的，但它们不是居中的。

甚至可以在它们没有嵌套时将它们置于彼此内部？我试过“位置：亲戚”，但那没有做任何事情。

body {
  font-family: Helvetica, sans-serif;
}

div {
  border-radius: 5px;
  padding: 3px;
  margin: 3px;
}

#outer {
  background-color: thistle;
  height: 200px;
  width: 200px;
  position: absolute;
}

#outer1 {
  background-color: cyan;
  height: 190px;
  width: 190px;
  position: absolute;
}

#outer2 {
  background-color: darkcyan;
  height: 180px;
  width: 180px;
  position: absolute;
}

#outer3 {
  background-color: greenyellow;
  height: 170px;
  width: 170px;
  position: absolute;
}

#outer4 {
  background-color: orange;
  height: 160px;
  width: 160px;
  position: absolute;
}

#outer5 {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
  position: absolute;
}

#outer6 {
  background-color: red;
  height: 140px;
  width: 140px;
  position: absolute;
}

#outer7 {
  background-color: azure;
  height: 130px;
  width: 130px;
  position: absolute;
}

#outer8 {
  background-color: mediumaquamarine;
  height: 120px;
  width: 120px;
  position: absolute;
}

#outer9 {
  background-color: salmon;
  height: 110px;
  width: 110px;
  position: absolute;
}

#outer0 {
  background-color: olive;
  height: 100px;
  width: 100px;
  position: absolute;
}

#inner {
  background-color: lavender;
  height: 90px;
  width: 90px;
  position: absolute;
}
<html>
<head>
  <meta charset="utf-8">
  <title>Innerconflict</title>
  <script src="innerconflict.js" defer></script>
  <link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
  <div id="outer"> </div>
  <div id="outer2"> </div>
  <div id="outer3"> </div>
  <div id="outer4"> </div>
  <div id="outer5"> </div>
  <div id="outer6"> </div>
  <div id="outer7"> </div>
  <div id="outer8"> </div>
  <div id="outer9"> </div>
  <div id="outer0"> </div>
  <div id="inner"> </div>
</body>
</html>

5 个答案:

答案 0 :(得分：3)

最简单的方法是将它们包裹在inline-block元素中并从最大的元素中删除position:absolute，然后您可以轻松地将它们置于中心位置：

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}

.main {
  display: inline-block;
  position: relative;
}

.main>div:not(:first-child) {
  border-radius: 5px;
  padding: 3px;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#outer {
  border-radius: 5px;
  padding: 3px;
  background-color: thistle;
  height: 200px;
  width: 200px;
}

#outer1 {
  background-color: cyan;
  height: 190px;
  width: 190px;
}

#outer2 {
  background-color: darkcyan;
  height: 180px;
  width: 180px;
}

#outer3 {
  background-color: greenyellow;
  height: 170px;
  width: 170px;
}

#outer4 {
  background-color: orange;
  height: 160px;
  width: 160px;
}

#outer5 {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
}

#outer6 {
  background-color: red;
  height: 140px;
  width: 140px;
}

#outer7 {
  background-color: azure;
  height: 130px;
  width: 130px;
}

#outer8 {
  background-color: mediumaquamarine;
  height: 120px;
  width: 120px;
}

#outer9 {
  background-color: salmon;
  height: 110px;
  width: 110px;
}

#outer0 {
  background-color: olive;
  height: 100px;
  width: 100px;
}

#inner {
  background-color: lavender;
  height: 90px;
  width: 90px;
}
＆＃13; 
<div class="main">
  <div id="outer"> </div>
  <div id="outer2"> </div>
  <div id="outer3"> </div>
  <div id="outer4"> </div>
  <div id="outer5"> </div>
  <div id="outer6"> </div>
  <div id="outer7"> </div>
  <div id="outer8"> </div>
  <div id="outer9"> </div>
  <div id="outer0"> </div>
  <div id="inner"> </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您可以将其与calc：

对齐 

body {
  font-family: Helvetica, sans-serif;
}

div {
  border-radius: 5px;
  padding: 3px;
  margin: 3px;
}
#inner {
  background-color: lavender;
  height: 90px;
  width: 90px;
  position: absolute;
  left: calc(50% - 45px);
  top: calc(50% - 45px);
}

#outer1 {
  background-color: green;
  height: 200px;
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

#outer1 {
  background-color: cyan;
  height: 190px;
  width: 190px;
  position: absolute;
  left: calc(50% - 95px);
  top: calc(50% - 95px);
}

#outer2 {
  background-color: darkcyan;
  height: 180px;
  width: 180px;
  position: absolute;
  left: calc(50% - 90px);
  top: calc(50% - 90px);
}

#outer3 {
  background-color: greenyellow;
  height: 170px;
  width: 170px;
  position: absolute;
  left: calc(50% - 85px);
  top: calc(50% - 85px);
}

#outer4 {
  background-color: orange;
  height: 160px;
  width: 160px;
  position: absolute;
  left: calc(50% - 80px);
  top: calc(50% - 80px);
}

#outer5 {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
  position: absolute;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
}

#outer6 {
  background-color: red;
  height: 140px;
  width: 140px;
  position: absolute;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
}

#outer7 {
  background-color: azure;
  height: 130px;
  width: 130px;
  position: absolute;
  left: calc(50% - 65px);
  top: calc(50% - 65px);
}

#outer8 {
  background-color: mediumaquamarine;
  height: 120px;
  width: 120px;
  position: absolute;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
}

#outer9 {
  background-color: salmon;
  height: 110px;
  width: 110px;
  position: absolute;
  left: calc(50% - 55px);
  top: calc(50% - 55px);
}

#outer10 {
  background-color: olive;
  height: 100px;
  width: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
<html>
<head>
  <meta charset="utf-8">
  <title>Innerconflict</title>
  <script src="innerconflict.js" defer></script>
  <link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
  <div id="inner"> </div>
  <div id="outer1"> </div>
  <div id="outer2"> </div>
  <div id="outer3"> </div>
  <div id="outer4"> </div>
  <div id="outer5"> </div>
  <div id="outer6"> </div>
  <div id="outer7"> </div>
  <div id="outer8"> </div>
  <div id="outer9"> </div>
  <div id="outer10"> </div>

</body>
</html>

答案 2 :(得分：2)

虽然css vars不能递增，但counter-increment不能用作属性值且attr()函数尚未实现，您仍然可以使用css计算:nth-child()的元素。

另外，根据您的需要，您可以使用css transformation来避免使用边距＆amp;位置。浏览器支持is very good。

＆＃13;
＆＃13; 
div {
  background-color: gray;
  position: absolute;
  width: 200px;
  height: 200px;
}

div:nth-child(odd) {
  background-color: orange;
}

div:nth-child(1) {
  transform: scale(.95);
}

div:nth-child(2) {
  transform: scale(.9);
}

div:nth-child(3) {
  transform: scale(.85);
}

div:nth-child(4) {
  transform: scale(.8);
}

/* And so on... */
＆＃13; 
<div></div>
<div></div>
<div></div>
<div></div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

我认为你需要的是在非嵌套容器中添加一点保证金＆＃39; CSS：

＆＃13;
＆＃13; 
body {
  font-family: Helvetica, sans-serif;
}

div {
  border-radius: 5px;
  padding: 3px;
  margin: 3px;
}

#outer {
  background-color: thistle;
  height: 200px;
  width: 200px;
  position: absolute;
}

#outer1 {
  background-color: cyan;
  height: 190px;
  width: 190px;
  margin-left: 5px;
  margin-top: 5px;
  position: absolute;
}

#outer2 {
  background-color: darkcyan;
  height: 180px;
  width: 180px;
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
}

#outer3 {
  background-color: greenyellow;
  height: 170px;
  width: 170px;
  margin-left: 15px;
  margin-top: 15px;
  position: absolute;
}

#outer4 {
  background-color: orange;
  height: 160px;
  width: 160px;
  margin-left: 20px;
  margin-top: 20px;
  position: absolute;
}

#outer5 {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
  margin-left: 25px;
  margin-top: 25px;
  position: absolute;
}

#outer6 {
  background-color: red;
  height: 140px;
  width: 140px;
  margin-left: 30px;
  margin-top: 30px;
  position: absolute;
}

#outer7 {
  background-color: azure;
  height: 130px;
  width: 130px;
  margin-left: 35px;
  margin-top: 35px;
  position: absolute;
}

#outer8 {
  background-color: mediumaquamarine;
  height: 120px;
  width: 120px;
  margin-left: 40px;
  margin-top: 40px;
  position: absolute;
}

#outer9 {
  background-color: salmon;
  height: 110px;
  width: 110px;
  margin-left: 45px;
  margin-top: 45px;
  position: absolute;
}

#outer0 {
  background-color: olive;
  height: 100px;
  width: 100px;
  margin-left: 50px;
  margin-top: 50px;
  position: absolute;
}

#inner {
  background-color: lavender;
  height: 90px;
  width: 90px;
  margin-left: 55px;
  margin-top: 55px;
  position: absolute;
}
＆＃13; 
<html>
<head>
  <meta charset="utf-8">
  <title>Innerconflict</title>
  <script src="innerconflict.js" defer></script>
  <link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
  <div id="outer"> </div>
  <div id="outer2"> </div>
  <div id="outer3"> </div>
  <div id="outer4"> </div>
  <div id="outer5"> </div>
  <div id="outer6"> </div>
  <div id="outer7"> </div>
  <div id="outer8"> </div>
  <div id="outer9"> </div>
  <div id="outer0"> </div>
  <div id="inner"> </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

这个答案是Temani Afif的答案的简单替代方案。它遵循相同的策略，将它们全部包装在另一个div中。

dev_appserver.py .

我们正在使用body { font-family: Helvetica, sans-serif; } div { border-radius: 5px; padding: 3px; margin: 3px; } #outermost{ display:flex; justify-content:center; } #outer { background-color: thistle; height: 200px; width: 200px; position: absolute; } #outer1 { background-color: cyan; height: 190px; width: 190px; position: absolute; } #outer2 { background-color: darkcyan; height: 180px; width: 180px; position: absolute; } #outer3 { background-color: greenyellow; height: 170px; width: 170px; position: absolute; } #outer4 { background-color: orange; height: 160px; width: 160px; position: absolute; } #outer5 { background-color: rebeccapurple; height: 150px; width: 150px; position: absolute; } #outer6 { background-color: red; height: 140px; width: 140px; position: absolute; } #outer7 { background-color: azure; height: 130px; width: 130px; position: absolute; } #outer8 { background-color: mediumaquamarine; height: 120px; width: 120px; position: absolute; } #outer9 { background-color: salmon; height: 110px; width: 110px; position: absolute; } #outer0 { background-color: olive; height: 100px; width: 100px; position: absolute; } #inner { background-color: lavender; height: 90px; width: 90px; position: absolute; } 属性来完成我们的工作。 HTML看起来像

display:flex

如果您需要垂直对齐，您只需将<html> <head> <meta charset="utf-8"> <title>Innerconflict</title> <script src="innerconflict.js" defer></script> <link rel="stylesheet" type="text/css" href="roundel_1.css"> </head> <button>RESET</button> <br> <br> <body> <div id="outermost"> <div id="outer"> </div> <div id="outer2"> </div> <div id="outer3"> </div> <div id="outer4"> </div> <div id="outer5"> </div> <div id="outer6"> </div> <div id="outer7"> </div> <div id="outer8"> </div> <div id="outer9"> </div> <div id="outer0"> </div> <div id="inner"> </div> </div> </body> </html> 添加到align-items:center并删除#outermost中的绝对位置即可。希望这会有所帮助。

这是垂直和水平对齐的fiddle。

相关问题
最新问题