CSS：固定大小的div，固定的垂直位置和水平居中？答案

【问题标题】：CSS: fixed size div, fixed vertical position and centered horizontally?CSS：固定大小的div，固定的垂直位置和水平居中？
【发布时间】：2016-01-21 09:57:16
【问题描述】：

在 CSS 中，是否可以有一个既水平居中又固定在浏览器底部的<div>？我为内部 div 设置了宽度和高度。

我尝试将一个带有position:relative 的 div 放在一个固定的外部 div 中，这样可以垂直对齐，但是外部 div 没有居中，我又回到了正方形。

这甚至可以仅使用 CSS 来实现吗？我也在使用 jQuery，所以如果这是唯一的方法，我会使用它，但如果可能的话，我宁愿使用 CSS。

谢谢，迪伦

【问题讨论】：

标签： jquery css

【解决方案1】：

想通了。

HTML

<div id="background">
    <div id="content">
    </div>
</div>

div#background{
    height: 800px;
    width: 100%;
    position: fixed;
    bottom: 0;
}

div#content{
    position: relative;
    margin: 0 auto;
    bottom:0;
    height: 700px;
    width: 800px;
}

将div#background 宽度设置为 100% 仍允许div#content 使用margin:auto，同时仍动态调整窗口宽度。

【讨论】：

它已经回答了，我还不能点击回答按钮。

【解决方案2】：

由于div#content 是固定宽度，您或许可以取消div#background：

div#content{
    position: fixed;
    width: 800px;
    height: 700px;
    bottom: 0;
    left: 50%;
    margin-left: -350px;
}

当然，如果你想要一个 100% 宽度的背景，你不妨坚持你的方法。

【讨论】：

【解决方案3】：

我认为您正在寻找这样的东西：

body {
   margin : 0;
   font-family : Arial;
}

.main {
    padding : 15px;
}

.footer-outer-container {
    position : fixed;
    display: table;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: #ccc;
}

.footer-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.footer {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="main">
  <p>
  ZE er RE GTEG ERG Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  </p>
  <p> eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG 
  </p>
  <p> eGE ERg erg er
  ZE er RE GTEG ERGERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG EG REG EG 
  </p>
  <p> eGE ERg erg er
  ZE er RE GTEG ERGERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE E GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G EgG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGERg erg erg er ERG  ERG EG REG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G EgG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG  ERG E eGE ERg erg erg er ERG  ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/>
  </p>
</div>
<div class="footer-outer-container">
   <div class="footer-inner-container">
     <div class="footer">
        Center this!
     </div>
   </div>
</div>

另见this Fiddle！

【讨论】：