如题所述
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {position: relative; width: 200px; height: 80px; border: 1px solid violet;}
span {position: absolute; bottom: 0;left: 80px}
3、浏览器运行index.html页面，此时成功用css实现了内容在div的底部居中。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2013-05-25
<html>
<head>
<title></title>
<style>
.nav{
background:blue;
width:800px;
height:50px;
margin:0 auto;
}
.content{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="nav"></div>
</div>
</body>
</html>
<head>
<title></title>
<style>
.nav{
background:blue;
width:800px;
height:50px;
margin:0 auto;
}
.content{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="nav"></div>
</div>
</body>
</html>
我不知道你要的是不是这种效果，这种效果是无论你怎么用下拉，它一直保持在那个位置，就是说它的位置是固定的，但不影响其他网页内容，就想象成是漂浮的。
position:fixed;bottom:0px;意思是，相对于浏览器窗口进行定位，离浏览器底部始终是0px。没有必要的计算。
不知道能不能帮到你。
本回答被网友采纳第2个回答 2018-02-28
内容在底部中间使用绝对定位，这个时候就可以添加bottom等方法实现：
position: absolute;
bottom: 0;/* 底部距离为0 */
left:0;right:0;/* 距离左右距离相等即可造成居中 */
}
如果是整个div永远在页面的最底下，就是用固定定位
position: fixed;
bottom: 0;
}
第3个回答 2013-05-24
代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，DIV固定………，这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
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; }追问
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，DIV固定………，这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
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; }追问
你这说的什么？？里面怎么还有计算方式！！！能不能修改的规范一些，我看不懂！
第4个回答 推荐于2016-02-08
<style type="text/css">
.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;
}
</style><div class="main">
<div class="bottom-center"></div>
</div>
<div class="bottom-center">这是内容</div>
</body><style type="text/css">
.bottom-center{
position: absolute;
bottom: 0px;
left: 50%;
/*margin-left根据文字长度来定义*/
margin-left:-25px;
}
</style>
.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;
}
</style><div class="main">
<div class="bottom-center"></div>
</div>
这样就好了，margin的-50其实是根据方块儿的半径算出来的，可以改main的宽度试下
追问我的意思是这样的这是内容，如何通过css将其显示在底部中间，不要加div
追答<body><div class="bottom-center">这是内容</div>
</body><style type="text/css">
.bottom-center{
position: absolute;
bottom: 0px;
left: 50%;
/*margin-left根据文字长度来定义*/
margin-left:-25px;
}
</style>
是这个意思吗？
追问那如果文字的长度不固定怎么办
追答那就只能用js了
本回答被网友采纳