CSS中怎么让DIV居中
发布网友
发布时间：2022-04-28 13:27
共2个回答
懂视网
时间：2022-04-28 17:49
当我们浏览网页的时候，会发现一般网站的主体都是在页面的中间，并且居中显示在浏览器中的正中央，只要我们实现div居中条件和浏览器居中条件保存一致。
假如我们把最外层的div盒子命名成php1，我们只要把body设置成样式为居中，代码如下：
body{text-align:center}这个时候，我们要对php1这个盒子设置成margin:0 auto，代码如下：
#php1{margin:0 auto}为了方便我们观察效果，我们把php1加一个黑色的边框，高度为100px，宽度为300px。
代码如下：
<div id="php1">Gxlcmsdiv居中效果演示</div>
显示效果如下：
在css样式中，想实现div居中，只需我们把对象设置成margin:0 auto的样式，但是在有的浏览器会默认成居中，为了兼容浏览器，我们就可以使用以上方法进行设置。
热心网友
时间：2022-04-28 14:57
主要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居中的方法。
