Question

在CSS中，是否可以让<div>水平居中并固定在浏览器的底部？我正在使用内部div的设置宽度和高度。

我已经尝试将一个带有position:relative的div放在一个固定的外部div中，然后垂直对齐，然后外部div不居中，我又回到原点。

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

谢谢，迪伦

Answer 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，同时仍然动态调整窗口宽度。

Answer 2

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

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

当然，如果你想要100％宽度的背景，你可能会坚持你的方法。

Answer 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！

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

3 个答案: