Html css概念中的div中的div垂直居中_Html_Css

Html css概念中的div中的div垂直居中

html css

Html css概念中的div中的div垂直居中,html,css,Html,Css,下面是我的html和css代码： <!DOCTYPE HTML> <html lang="en"> <head> <style> body{ background-color: deepskyblue; } .main{ background-color: black; color: white;

下面是我的html和css代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <style>
        body{
            background-color: deepskyblue;
        }

        .main{
            background-color: black;
            color: white;
            width: 100px;
            height: 100px;
        }

        .inside{
            background-color: orangered;
            width: 50%;
            height: 50%;
            margin: 25%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="inside"></div>
    </div>
</body>

</html>


身体{
背景颜色：深蓝；
}
梅因先生{
背景色：黑色；
颜色：白色；
宽度：100px；
高度：100px；
}
.里面{
背景颜色：橙色；
宽度：50%；
身高：50%；
利润率：25%；
}

我希望它看起来像：

但它实际上看起来像：

我不是在问如何修复它（我知道我可以用“位置”来解决它）。我的问题是，为什么垂直方向上“内部”div框不居中？从检查中，我可以看到“内部”的边距（顶部）不基于“主”分区框。但是，水平方向上，“内侧”的边距（左侧）基于“主”div框。我想知道这个概念。

您可以使用我创建的帮助器类使div中心垂直/水平/两者对齐

.center-x{ position: absolute; left: 50%; transform: translateX(-50%);  }

.center-y{ position: absolute; top: 50%; transform: translateY(-50%); }

.center-xy{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

只需在

希望它能解决您的问题

在

.main

规则中使用flexbox

.main{
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  display : flex;
  align-items : center;
  justify-content:center;
}

您还可以从

.inside

元素中删除边距

.inside{
  background-color: orangered;
  width: 50%;
  height: 50%;
}

只需将

position:relative

添加到.main，将

position:absolute

添加到内部即可。至于这个概念，你有一个相对定位的容器，还有一个和高度相同的集合。然后，带绝对定位的内部div的宽度为50%+25%，每侧边距=100%。高度、顶部和底部也是如此

使用transform的元素会将元素的左上角定位到其容器的中心，然后移动50%的子元素高度和50%的子元素宽度

正文{
背景颜色：深蓝；
}
梅因先生{
背景色：黑色；
颜色：白色；
宽度：100px；
高度：100px；
位置：相对位置；
}
.里面{
位置：绝对位置；
背景颜色：橙色；
宽度：50%；
身高：50%；
利润率：25%；
}

在这种特殊情况下，上页边距正在塌陷——实际上，25%的上页边距正在转移到

.main

容器中例如，通过将

溢出：auto

添加到

.main

：

html，
身体{
保证金：0；
}
身体{
背景颜色：深蓝；
}
梅因先生{
背景色：黑色；
颜色：白色；
宽度：100px；
高度：100px；
溢出：自动；
}
.里面{
背景颜色：橙色；
宽度：50%；
身高：50%；
利润率：25%；
}

标签的可能副本有一个“块”显示。如果您将“.inside”类设置为具有“display:inline块”，您将获得所需的结果。有些问题会问“块”和“内联块”有什么区别。谢谢你的回答和代码。事实上，我知道如何解决这个问题，但我要寻找的是背后的概念。谢谢你的代码。其实，我不是在寻找如何解决这个问题，我在寻找的是这个问题背后的理念。没问题，还是要感谢你的回答。谢谢你的帮助，这也是我的解决方案。然而，我不是在寻找如何解决这个问题，我所寻找的是这个问题背后的概念。谢谢你添加这些概念，我真的很感激。在我们为“main”和“inside”div添加了“position”之后，我理解了这个概念，但如果没有这些“position”，我仍然不清楚为什么它适用于水平方向，而不适用于垂直方向？另外，如果我把所有的“%”都改为“px”，这些问题仍然存在。好吧，你需要一些引用来渲染元素。这就是定位所提供的！如果这是没有意义的，那么你需要阅读有关定位之前，你可以理解的利润或垫！感谢您的回答，原因是默认情况下，上（下）页边距将崩溃。