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代码,从而达到想要的效果。
粉丝
0
关注
0
收藏
0