新建一个html文件,定名为test.html,用于讲解用css如何使div相对整个页面居中。
在test.html文件中,建立一个div,并设置其class属性为dcenter,本家儿要用于下面进行css样式设置。
在test.html文件中,初始化页面所有元素的css样式 ,设置表里边距都为0px。
在css样式中,对类名为dcenter的div进行样式设置。设置div的宽高为200px,布景颜色为红色。
设置div的位置属性为绝对定位(position: absolute),距离页面左边缘为50%,距离页面上边缘为50%。
经由过程上面的css样式设置,只是实现了div左上角的点在页面居中,若想整个div居中,还需要经由过程transform设置div的程度和垂直位置的偏移量为-50%。
在浏览器打开test.html文件,查看div在整个页面居中的结果。
0 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!