CSS怎样让一个div居中?

 我来答
tjhtymail
2013-08-16
知道答主
回答量:25
采纳率:0%
帮助的人:5.4万
展开全部
第一种方式:设置body 居中。在CSS中的代码是(body{text-align:center;})
第二种方式:用盒子模型,首先设置一个Div ,这个DIV的宽度为100%,然后在这个DIV居中,那么在这个DIV中加的内容就居中显示,代码如下:
<div class="div1">
<div class="div2"></div>
</div>

CSS 样式代码:
<style type="text/css">
.div1{text-align:center;width:100%;}
.div2{width:980px;background:red;} //为了看清效果,加了背景颜色
</style>

第三种方式:margin:0 auto;
屈照咎萌
2020-01-17 · TA获得超过3709个赞
知道大有可为答主
回答量:3145
采纳率:25%
帮助的人:164万
展开全部

主要css代码有两个:
1,text-align:center 
2,margin:0
auto;
其两个样式需要配合使用才能实现div盒子的居中显示排版。
首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0
auto,这样即可让对应div水平居中。
举个例子,居中代码为:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
<title>CSS使div居中制作</title> 
<style> 
body{
text-align:center} 
#nav{
margin:0
auto;
width:200px;
height:150px;
border:5px
double
#FF0066;} 
/*
css注释:为了观察效果设置宽度
 高度
边框等样式
*/ 
</style> 
</head> 
<body> 
<div
id="nav"> 
DIV居中
</div> 
</body>
</html>
为了观察div居中效果,我们对div设置一个div命名为“#div”在html中div标签内使用id=“nav”,设置其宽度为200px;高度为150px,边框也设置了颜色。
效果如图:
以上就是CSS让DIV居中的方法。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友1e44ba2
2018-05-18 · TA获得超过5684个赞
知道答主
回答量:64
采纳率:100%
帮助的人:9313
展开全部

通过css样式表可以实现,如下图:

效果如下:

知识拓展:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
育知同创教育
2018-07-30 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
很简单啊:只要设置div的左右边距为auto,上下边距任意,代码如:{margin:20px auto;}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
广州世峰
2013-08-16 · 超过16用户采纳过TA的回答
知道答主
回答量:57
采纳率:0%
帮助的人:51万
展开全部
向外框div添加 margin:0 auto;就行了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(6)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式