让一个div在屏幕水平垂直居中（响应式）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让一个div在屏幕水平垂直居中（响应式）相关的知识，希望对你有一定的参考价值。

<!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在屏幕水平垂直居中（响应式）的主要内容，如果未能解决你的问题，请参考以下文章

css 实现DIV水平垂直居中于屏幕

前端面试CSS系列——DIV垂直水平居中

怎么使用CSS让图片水平垂直都居中？

06-09 响应式网页设计-水平垂直居中方法-学习总结

如何使文字在div中水平和垂直居中的css代码

如何在 div 中垂直居中 H1？