个人中心
gpt4 book ai didi

html - 在 css 概念中垂直居中一个 div

转载 作者：太空宇宙 更新时间：2023-11-04 14:55:17 24 4
gpt4 key购买 nike

这是我的 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>

我希望它看起来像:

enter image description here

但它实际上看起来像:

enter image description here

我不是在问如何修复它(我知道我可以使用“position”来解决它)。我的问题是为什么“内部”div 框不会垂直居中？从检查中我可以看到“内部”的边距(顶部)不基于“主”div 框。但是，“内部”的水平边距(左)是基于“主”div 框的。我想知道这个的概念。

最佳答案

在这种特殊情况下，顶部边距正在折叠——实际上，25% 的顶部边距正在转移到 .main 容器。 You can prevent this in a few ways -- 例如，通过将 overflow: auto 添加到 .main:

html,
body {
  margin: 0;
}

body {
  background-color: deepskyblue;
}

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

.inside {
  background-color: orangered;
  width: 50%;
  height: 50%;
  margin: 25%;
}
<div class="main">
  <div class="inside"></div>
</div>

关于html - 在 css 概念中垂直居中一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43856373/

24 4 0
文章推荐： html - 文本不围绕 iPhone 上的 float 图像
文章推荐： Java 编码器。使用标签值作为属性值
文章推荐： javascript - 用复选框替换切换按钮但不起作用
文章推荐： java - 配置 Apache JMeter HTTP(S) 测试脚本记录器时遇到错误
太空宇宙
个人简介

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

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