logo标签列表

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

jquerycss
3
在CSS中，是否可以有一个既水平居中又固定在浏览器底部的
元素？我已经为内部
元素设置了固定的宽度和高度。
我尝试将带有position:relative属性的
元素放置在固定的外部
元素中，这样可以垂直对齐，但是外部
元素不再居中，我又回到了起点。
仅使用CSS是否可能实现这一点？我也在使用jQuery，所以如果只有这种方法，我会使用它，但如果可能的话，我更愿意使用CSS。
谢谢， dylan
3个回答
4

搞定了。

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，同时动态调整窗口宽度。
1
已经回答了，只是我还不能点击答案按钮。 - Vagabond_King
1

由于 div#content 是固定宽度的，您可能可以省略 div#background：

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

当然，如果你想要一个100%宽度的背景，最好还是坚持你的方法。

0
我认为你正在寻找类似于这样的东西： 

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>

请参考这个Fiddle！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接