主要css代码有两个：
1,text-align:center
2,margin:0 auto；
首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。
举个例子，居中代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
<html xmlns=">
<head>
<meta >
<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居中的方法。
当然还有其他的办法，使用css3新特性的d盒属性，给父盒子加上display:flex(必须)表示为d性布局元素，再加上justify-content: center;就可以实现水平居中，想要再实现垂直居中的话也可以再加上一个属性：align-item:center;当然这两个属性均要在父盒子中添加。
具体更多布局方案你可以百度一下css3的d性盒子教程自己了解学习一下，希望能帮到你。div居中可以用外边距margin属性来实现。 1、新建html文档，在body标签中添加div标签，标签的id为“header”，这时因为div标签中没有内容且没有设置样式，所以网页中显示空白： 2、这时为div标签设置原题中的css样式，此时虽然div盒子显示了，但是没有居中： 3、此时为div添加一个“margin: 0 auto”属性就会居中显示，“margin”指的是div标签的外边距，“0”指的是div标签上下的外边距，“auto”指的是div标签左右的外边距，并且会根据浏览器窗口大小自动居中，这时就是完整的html和css代码：首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。 实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。
层垂直居中于浏览器，一直是新手朋友比较头疼的问题。 其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。 如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）