码迷,mamicode.com
首页 > 其他好文 > 详细

让一个div在屏幕水平、垂直居中(响应式)

时间:2016-10-09 17:12:12      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1" />
        <title></title>
        <style type="text/css">
            .parent{
                position: fixed;
                top: 50%;
                bottom: 50%;
                left: 50%;
                right: 50%;
                width: 0;
                height: 0;
            }
            .show{
                border: 1px solid red;
                height: 20rem;
                width: 20rem;
                /* 以下两个属性必须为width,height值的负一半 */
                margin-left: -10rem;
                margin-top: -10rem;
            }
            table{
                width: 100%;
                height: 100%;
                text-align: center;
            }
            td{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="show">
                <table>
                    <tr>
                        <td><img src="解析图片/error.png"></td>
                    </tr>
                    <tr>
                        <td>aa</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

结果:

技术分享

让一个div在屏幕水平、垂直居中(响应式)

标签:

原文地址:http://www.cnblogs.com/wenxiangxu/p/5942730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!