div完全纯css自适应居中【兼容IE7+ Chrome FireFox 等】

最新推荐文章于 2021-08-03 21:54:41 发布

凝风

最新推荐文章于 2021-08-03 21:54:41 发布

阅读量5.2k

点赞数

分类专栏：产品-Product 文章标签： css stylesheet ie7

本文链接：https://blog.csdn.net/yangxy81118/article/details/21862677

版权

产品-Product 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

新的博客文章将逐步转移到我的新个人主页：

http://blog.guaidm.com/shocky

当然主入口在这里，点这里才有惊喜：

..从产品设计css一直做到linux运维的程序猿... 很多技术都是皮毛，各位见谅，只求和大家交流一点小技术，欢迎拍砖！..

1. 纯CSS，完全无需JS，对JS程序猿来说一种解放！

2. IE7、8 下rgba属性会失效，所以如果要做半透明要新加一个div，这个步骤我偷个懒就省了哈哈，重点是中间的div

3. 对于弹出层，各位针对自己的情况设置z-index，这里我没有设置了

4. IE6没有测试，抱歉= =

DOM结构

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    
    <body>
        <p>
            fdsfsdfsadfsdafsdafdssad
        </p>
        <div class="pop-wrap">
            <table>
                <tr>
                    <td>
                        <div class="pop">
                            <p>
                                感觉如何？
                            </p>
                            <input type="button" value="确定" />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

stye.css :

.pop-wrap{
	position: fixed;
	top: 0;
	background: rgba(0, 0, 0, .8);
	left: 0;
	width: 100%;
	height: 100%;
}

.pop-wrap table {
	height: 100%;
	width: 100%;
}

.pop-wrap td {
	width: 100%;
	height: 100%;
}

div.pop {
	margin: 0 auto;
	width: 200px;
	background: #ECECEC;
	padding: 20px;
	text-align:center;
}

div.pop p {
	font: 200 14px/20px Microsoft YaHei;
}

div.pop input {
	background: #FFFFFF;
	border: 1px solid #ADADAD;
	padding: 3px 10px; 
	border-radius : 2px;
	cursor: pointer;
}

凝风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div完全纯css自适应居中【兼容IE7+ Chrome FireFox 等】

从产品设计css一直做到linux运维的程序猿... 很多技术都是皮毛，各位见谅，只求和大家交流一点小技术，欢迎拍砖！1. 纯CSS，完全无需JS，主要就是借用了“万恶”的table..呵呵，如果各位觉得table还有点用的话，就可以尝试一下吧，“table反对党”请无视哈...2. IE6没有测试，抱歉= = DOM结构
复制链接

扫一扫