html - CSS:在另一个盒子中创建一个盒子

标签 html css

我是 CSS 初学者,想创建一个简单的盒子并将另一个盒子放在第一个盒子的中心,

尝试过这样的事情

#first {
    width: 100px;
    height: 100px;
    background: red;
}
#first #second{
    width: 50%;
    height: 50%;
    background: green;
}
     
     <!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>BOX-EXAMPLE</title>
 </head>
 <body>
    <div id="first">
      <div id="second"></div>
     </div>
 </body>
</html>

但不如预期。

最佳答案

#first {
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}

#first #second{
    position: relative;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    background: green;
}

Fiddle

关于html - CSS:在另一个盒子中创建一个盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27690404/

相关文章:

javascript - jQuery 动画语法

html - 在最后一行调整 flex 元素的大小

javascript - SVG如何获取鼠标在内部矩阵上的位置

html - 加密 CSS 外部链接并限制访问

css - bootstrap 4 导航栏边框底部颜色

html - 固定尺寸盒子的 CSS 流体网格

javascript - 单击更改颜色输入字段

html - li 的边框与背景相同

html - 在 WordPress 中居中对象

c# - 如何向 css、javascript 添加根或基本 url?