需要准备的材料分别有：电脑、浏览器、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的底部居中。
<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。没有必要的计算。
不知道能不能帮到你。
本回答被网友采纳内容在底部中间使用绝对定位，这个时候就可以添加bottom等方法实现：
position: absolute;
bottom: 0;/* 底部距离为0 */
left:0;right:0;/* 距离左右距离相等即可造成居中 */
}
如果是整个div永远在页面的最底下，就是用固定定位
position: fixed;
bottom: 0;
}
下面先考虑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; }追问
你这说的什么？？里面怎么还有计算方式！！！能不能修改的规范一些，我看不懂！
.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了
本回答被网友采纳cssdiv居中的三种方法
方法一：使用margin属性实现水平居中 对于单个div元素，可以通过设置左右margin为auto来实现水平居中。这种方法适用于宽度固定的div。例如，给div设置一个固定的宽度，然后将左右margin都设置为auto，浏览器会自动计算并均匀分配两侧空白，使div水平居中。方法二：利用flexbox布局实现灵活居中 Flexbox是CSS3中的...
htmlcss怎么让文字在页面底部居中
在CSS样式中，设置如下:.div_foot{position:fixed;bottom:0;\/*将元素定位到页面底部*\/left:0;\/*使元素居于屏幕左边缘*\/height:50px;\/*设置元素的高度*\/text-align:center;\/*使文字水平居中*\/line-height:50px;\/*文字行高与高度一致，确保垂直居中*\/width:100%;\/*宽度占据屏幕的全部*\/}对于HTML...
如何让一个div居中 CSS怎样让一个div居中
1、新建一个html文件，命名为test.html，用于讲解CSS怎样让一个div居中。2、在test.html文件中，使用div标签创建一个模块，用于测试居中效果。3、在test.html文件中，设置div的class属性为test，下面将通过该class属性设置其css样式。4、在test.html文件内，编写<styletype=text\/css><\/style>标签，页面...
css 让div居中的几种方式
当外部大div和内部小div的宽度和高度都已知且固定时，可以使用margin属性让小div居中。只需为小div设置`margin: auto`即可实现。另一种方法是利用position: absolute;。将小div设为绝对定位，设置left和top为`auto`，可以让小div在大div中水平和垂直居中。具体可以分为两种情况：一是指定left和top的精确...
html css怎么让文字在页面底部居中
1、想要让文字在底部，需要用到 position:fixed; bottom:0px; left:0px;2、想要让文字居中，需要用到 text-align:center;3、具体代码 <div class="div_foot"> ©2017-2018 <\/div> .div_foot { position: absolute;height: 50px;text-align: center;line-height: 50px;width: 100%;...
如何div中的div居中cssdiv中的div怎么居中
几种居中CSSdiv的方法 CSS实现div垂直居中的方法有很多。下面这些使div居中的方法在编写网页时经常用到，最常见的例子就是登录注册弹出框。方法一:使用绝对布局位置:absolutefordiv并设置top、left、right、bottom的值相等，但不一定都等于0；并设置边距:自动。方法二:这个方法需要知道div的宽度和高度。使用...
在网页制作中如何使用CSS让DIV下的文字居中呢
使用“ling-height”属性让文字垂直居中。1、新建html文档，在body标签中添加div标签并填写一段文字，然后为这个div设置一些样式：2、为div添加“text-align”属性，属性值为“center”，这时文字将会在框内水平居中：3、为div添加“line-height”属性，属性值为div的高度，这时文字将会在框内垂直居中：
如何让div中的文字居中怎么让div中的文字居中
1。打开编辑器，为学习今天的内容创建一个新的test.html。2.接下来需要在head标签下引入jquery.min.js插件，如下图所示。3.在页面的body标记中，创建一个名为test的新div。4.编写，用于存储js代码。导航到divbyclass并通过css()方法使文本居中。5.在浏览器中打开test.html，文本可以显示在页面中间。
CSS怎样让一个div居中?
第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：<div class="div1"> <div class="div2"><\/div> <\/div> CSS 样式代码：<style ...
如何使div居下怎么让div上下居中
方法1:思路:使用text-align属性使图片保持在底部，然后设置padding-top的值使其保持在底部。其结构如下:img src=images\/tt.gifwidth=150height=100\/>width= CSS样式如下:div{width:300px；高度:150px背景色:#CCC边框:#0001px纯色；文本对齐:居中；填充顶部:50px} 运行结果如下:解释:图片尺寸为150x...
