Css 关于水平、垂直和响应地将Div置于外部Div内的问题

你能帮我拍张照片，告诉我如何在水平和垂直方向上居中放置第二个div

#two

？我们是否可以设置一个即使在响应模式或浏览器大小变化时也能处理位置的设置

我采用了一个来自中国的伎俩，但对我无效

<div id="wrap">
    <div id="two"></div>
</div>

body {
    padding:25px;
}
#wrap {
    height:380px;
    width:60px;
    border:1px solid;

}
#two {
    height:300px;
    width:6px;
    background:#b2b2b2;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -160px;
    margin-top: -30px;
}

身体{
填充：25px；
}
#包裹{
高度：380px；
宽度：60px；
边框：1px实心；
}
#两个{
高度：300px；
宽度：6px；
背景#b2b2b2；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-160px；
利润上限：-30px；
}

谢谢

这就是你需要的

#wrap

已给出

位置：相对。这意味着
#wrap
的任何子元素的
位置：绝对将相对于其定位，而不是
主体

#two
的负边距必须正好是该div宽度和高度的一半

就自动调整大小而言，仅使用CSS无法实现这一点

拉小提琴-

HTML

说到响应性，您必须尽可能远离绝对定位，使用百分比而不是固定宽度

剩下的就好了

body {
   padding:25px;
}
#wrap {
   height:380px;
   width:100%;
   max-width:600px;
   border:1px solid;
   margin:0 auto;
   padding:25px;
 }
 #two {
   height:300px;
   width:100%;
   max-width:400px;
   background:#b2b2b2;
   margin: 0px auto
 }

请注意，当您缩小窗口时，框的大小实际上是如何减小的


#wrap {
    position: relative;
    width:500px;
    height:500px;
    border: solid 1px #CCC;
    overflow: hidden;

}

#two {
    height:300px;
    width:300px;
    background:#b2b2b2;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

body {
   padding:25px;
}
#wrap {
   height:380px;
   width:100%;
   max-width:600px;
   border:1px solid;
   margin:0 auto;
   padding:25px;
 }
 #two {
   height:300px;
   width:100%;
   max-width:400px;
   background:#b2b2b2;
   margin: 0px auto
 }