css一个div居中

CSS是网页设计技术中最重要的一种技术之一。很多设计师都知道，要制作一个页面最先要定义好页面的结构，而其中最重要的一个结构元素是页面布局。在页面布局中最重要的就是如何实现一个div块元素的居中效果。那么下面就来分享一下如何实现这个效果。

/* div居中的样式 */
.center {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
} 

上面的代码是实现一个div块元素居中的CSS样式，其中div的class属性为.center，其中最重要的几个属性解释如下：

• position: absolute; 表示绝对定位，可以通过top、bottom、left、right等属性对div进行定位
• top: 50%; 表示div的上边框距离浏览器窗口顶部的距离为50%，此时div的上边框会与浏览器窗口的中线重合
• left: 50%; 表示div的左边框距离浏览器窗口左侧的距离为50%，此时div的左边框也会与浏览器窗口的中线重合
• margin-top: -100px; 表示div的上边距为负的自身高度的一半（即-200/2），这样就可以让div垂直居中
• margin-left: -100px; 表示div的左边距为负的自身宽度的一半（即-200/2），这样就可以让div水平居中

通过上面的CSS样式代码，就可以实现一个div块元素的垂直和水平居中了。在实际的项目中，如果需要实现其他的样式，可以根据自己的需求修改上面的CSS代码，从而达到想要的效果。