div+css实现未知宽高元素垂直水平居中

时间：2022-01-05 10:36:28

div+css实现未知宽高元素垂直水平居中。很多同学在面试的时候都会遇到这样的问题：怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中？？如果用JS的话就好办了，但是JS的使用会对页面性能造成影响，而且能用CSS实现的干嘛用JS呢，嘿嘿

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>div+css实现未知宽高元素垂直水平居中</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 1120px;

            height: 968px;

            text-align: center;

            background: #eaeaea;

        }

        .box span {

            display: inline-block;

            height: 100%;

            vertical-align: middle;

        }

        .box div {

            background: #ccc;

            vertical-align: middle;

            display: inline-block;

        }

        /*.box img{*/

            /*vertical-align: middle;*/

            /*display: inline;*/

        /*}*/

    </style>

</head>

<body>

<div class="box">

    <!--<img src="0.jpg" alt=""/>-->

    <div>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　</div>

   <span></span>

</div>

</body>

</html>

相关文章