Question

您能否请look at this Demo告诉我如何在水平和垂直方向上居中第二个#two？即使在响应模式或浏览器大小发生变化的情况下，我们是否可以设置照顾位置？

我跟随了CSS-Trick的一招，但它对我不起作用！

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

由于

Answer 1

这就是你所需要的！

#wrap已获得position: relative;。这意味着#wrap position: absolute; body的任何子元素都将相对于它而不是#two定位。

<div id="wrap"> <div id="two"></div> </div>的负边距需要恰好是该div的宽度和高度的一半。

关于自动调整大小，使用此方法仅使用CSS无法实现。

有一个小提琴 - Fiddle Link!

HTML

#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;
}

CSS

{{1}}

Answer 2

在响应性方面，您必须尽可能远离绝对定位，并使用百分比而不是固定宽度。

其余的只是很好的css

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
 }

注意缩小窗口时盒子的大小实际减小

FIDDLE

关于在外部div中水平，垂直和响应地居中Div的问题

2 个答案: