CSS：固定大小div，固定垂直位置和水平居中？ [英] CSS: fixed size div, fixed vertical position and centered horizontally?

问题描述

在CSS中，是否可能有一个< div> 既水平居中又固定在浏览器底部？我使用的是内部div的设置宽度和高度。

In CSS, is it possible to have a <div> that is both centered horizontally and fixed to the bottom of the browser? I'm using a set width and height for the internal div.

我试过放置一个div position：relative 在一个固定的外部div，并且垂直对齐，但然后外部div不居中，我回到方形。

I've tried putting a div with position:relative inside a fixed outer div, and that aligns things vertically but then the outer div is not centered and I'm back to square one.

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

Is this even possible to do using just CSS? I'm using jQuery as well, so I would use that if it’s the only way, but I’d rather do it with CSS if it’s possible.

谢谢，
dylan

Thanks, dylan

推荐答案

想象出来。

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 width to 100％仍然允许 div＃content 使用 margin：auto ，同时仍然动态调整到窗口

Setting the div#background width to 100% still allows the div#content to use margin:auto while still dynamically adjusting to the window width.

这篇关于CSS：固定大小div，固定垂直位置和水平居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！