CSS: fixed div size, fixed vertical position and horizontal centered?

Question

In CSS, is it possible to have <div>which is centered and horizontal, and is fixed at the bottom of the browser? I use the width and height of the set for the inner div.

I tried to put a div with position:relativeinside a fixed outer div, and this aligns things vertically, but then the outer div is not centered, and I will go back to the square.

Can this be done only with CSS? I also use jQuery, so I would use this if this is the only way, but Id would rather do it using CSS if possible.

Thanks Dylan

Answer 1

Figured it out.

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% -width , .

Answer 3

I think you are looking for something like this:

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>

Run codeHide result

See also this script !