个人中心
gpt4 book ai didi

html - CSS - 在另一个 div 中居中一个 div(非嵌套)

转载 作者：太空宇宙 更新时间：2023-11-04 13:50:40 25 4
gpt4 key购买 nike

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

在没有嵌套的情况下，是否可以将它们彼此居中？我试过“position: relative”，但那没有做任何事情。

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>

最佳答案

最简单的方法是将它们包裹在 inline-block 元素中并从最大的元素中删除 position:absolute 然后你可以轻松地将它们居中:

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

关于html - CSS - 在另一个 div 中居中一个 div(非嵌套)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49740384/

25 4 0
文章推荐： c++ - Qt 应用程序无法加载自定义插件调试库
文章推荐： java - 如何使用java编辑、处理和保存FTL文件？
文章推荐： java - 混合两种 ARGB 颜色
文章推荐： java - 可以使用 JavaFX 中的 ListView 实现以下 UI
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com