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

在CSS中，是否可以有一個<div>，它既是水平居中的，也是固定在瀏覽器底部的？我爲內部div使用了一組寬度和高度。CSS：固定大小div，固定垂直位置並水平居中？

我試過把一個div與position:relative放在一個固定的外部div中，並且這個東西是垂直對齊的，但是外部div沒有居中，我又回到了原點。

這甚至有可能只使用CSS？我也使用jQuery，所以如果這是唯一的方法，我會使用它，但如果可能的話，我寧願使用CSS。

感謝，迪倫

2010-02-14 Vagabond_King

想通了。

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同時仍動態地調整到窗口寬度。

來源

2010-02-14 20:14:21

它的回答，我只是不能點擊答案按鈕。 – 2010-02-14 20:15:06

由於div#content是固定的寬度，你也許能div#background做掉：

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

當然，如果你想在一個有100％的-width背景，你不妨用你的方法堅持。

來源

2010-02-14 20:47:14

我認爲你在尋找這樣的事情：

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！

來源

2016-01-21 01:57:16

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

回答

相關問題