CSS: фиксированный размер div, фиксированное вертикальное положение и центрирование по горизонтали?

Question

Возможно ли в CSS иметь <div>, который расположен по центру по горизонтали и прикреплен к нижней части браузера? Я использую заданную ширину и высоту для внутреннего div.

Я пытался поместить div с position:relative внутри фиксированного внешнего 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>

См. Также эту скрипку !