css中怎么样才能使内容在div的底部中间

2024-12-03 14:45:17

推荐回答（5个）

回答（1）：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的

我不知道你要的是不是这种效果，这种效果是无论你怎么用下拉，它一直保持在那个位置，就是说它的位置是固定的，但不影响其他网页内容，就想象成是漂浮的。

position:fixed;bottom:0px;意思是，相对于浏览器窗口进行定位，离浏览器底部始终是0px。没有必要的计算。

不知道能不能帮到你。

回答（3）：

内容在底部中间使用绝对定位，这个时候就可以添加bottom等方法实现：

.content{
    position: absolute;
    bottom: 0;/* 底部距离为0 */
    left:0;right:0;/* 距离左右距离相等即可造成居中 */
}

如果是整个div永远在页面的最底下，就是用固定定位

.contentBox {
    position: fixed;
    bottom: 0;
}

回答（4）：

代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码

Content

请改变浏览器窗口的高度，以观察footer效果。

这里是示例文字，DIV固定………，这里是示例文字。

Footer

CSS代码：
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh1{ font:20px/2Arial; margin:0; padding:010px; }

回答（5）：


    .main{
        width:900px;
        height:500px;
        overflow:hidden;
        position: relative;
        margin:0 auto;
        border:1px solid #000;
    }
    .bottom-center{
        background: green;
        width:100px;
        height:100px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin:0px 0px 0px －50px;
    }

这样就好了，margin的-50其实是根据方块儿的半径算出来的，可以改main的宽度试下