在父 div 中间创建一个 div答案

【问题标题】：make a div middle of parent div在父 div 中间创建一个 div
【发布时间】：2012-11-22 14:40:26
【问题描述】：

我试图将#chat-inner div 保持在#chat-main div 的中间，我可以通过使用百分比值来做到这一点，但我的问题是应该有2px 间隙（关于宽度和高度），百分比值无法提供。为了清楚理解，请参阅 CSS 代码中的注释。

JSbin

HTML

<div id="chat-outline">
  <div id="chat-main">
    <div id="chat-inner">
    </div>
  </div>
</div>

CSS

#chat-outline
{background-color:grey;width:30%;height:40%;
 position:fixed;bottom:5px;right:5px;
 padding:2px;}

#chat-main
{
  width:100%;
  height:100%;
  background-color:silver;
  overflow:hidden;
}

#chat-inner
{
  width:95%;
  height:97%;

  /*How can I give pixels here? I need 2px value*/
  margin:2.5% 2.5% 2.5% 2.5%;  

  /*margin:2px;*/

  background-color:cornflowerblue;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试这样的事情 (demo)：

#chat-outline
{ background-color:grey;width:30%;height:40%;
  position:fixed;bottom:5px;right:5px;
padding:2px;}

#chat-main
{
  width:100%;
  height:100%;  
  background-color:silver;
  overflow:hidden;
  position:relative;
}

#chat-inner
{  
  top:2px;
  bottom:2px;
  right:2px;
  left:2px;  
  background-color:cornflowerblue;
  position:absolute;
}

【讨论】：

即使给出不同的位置，#chat-inner div 是否会在#chat-outline div 内？因为我需要通过单击按钮或其他方式隐藏聊天。
#chat-inner 会去任何地方 #chat-outline 会去。
@Mr_Green HI 为什么你要定义不需要的位置我认为 Shailender Arora 的答案很清楚
@RohitAzad 抱歉，实际上我应该提到我不想使用 box-sizing 属性。我正在尝试创建一个跨浏览器兼容的（包括 IE）。如果我错了，请纠正我:)

【解决方案2】：

您也可以通过padding 达到您想要的结果：-

#chat-outline
{background-color:grey;width:30%;height:40%;
  position:fixed;bottom:5px;right:5px;
padding:2px;}

#chat-main
{
  width:100%;
  height:100%;
  background-color:silver;
  overflow:hidden;
  padding:2px;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

#chat-inner
{
  width:100%;
  height:100%;
  background-color:cornflowerblue;
}

DEMO

【讨论】：