CSS实现DIV浮动层绝对居中定位的实例

发布时间:2020-06-30编辑:脚本学堂
DIV浮动层绝对居中定位怎么写?如何用css写?请看下面文章介绍。

下面的写法兼容IE系列浏览器和火狐浏览器。 DIV浮动层绝对居中定位用CSS的样式写法如下:
 

复制代码 代码示例:
#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;
 width:600px;height:300px;
 display:block;
 position: absolute;
 top:50%;
 left:50%;
 margin-left:-300px;
 margin-top:-150px;}

padding:10px;background-color:#003300;color:#FFFFFF; 这几句都是装饰性的东西不是核心;

 width:600px;height:300px; DIV总的有个宽高吧,根据自己的具体情况设置;

display:block; 把DIV以块级元素显示;

 position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px; 这一段是重点,很多朋友已看明白了,就是绝对定位DIV层,当然你应该让他相对于body标签。margin-left:-300px; 这个值是DIV宽度的一半, margin-top:-150px; 是DIV高度的一半。
不知你有没有明白,不明白的话,还可以参考下:浮动元素水平居中的实现方法。

>>> 查看更多 css 居中 相关教程 <<<