块级元素居中

最新推荐文章于 2020-10-12 19:44:03 发布

转载最新推荐文章于 2020-10-12 19:44:03 发布 · 433 阅读

方式一：
 利用margin

<!DOCTYPE html>

<html>

    <head>

        <title>块级元素水平，垂直居中</title>

        <meta charset="utf-8">

        <style>

            .wrapper
 {

                height:
 600px;

                border:
 1px solid gray;

            }

            .box
 {

                width:
 100px;

                height:
 100px;

                background:
 gold;

                margin:
 250px auto 0;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="box"></div>

        </div>

    </body>

</html>

方式二，利用定位及负边距

<!DOCTYPE html>

<html>

    <head>

        <title>块级元素水平，垂直居中</title>

        <meta charset="utf-8">

        <style>

            .wrapper
 {

                height:
 600px;

                border:
 1px solid gray;

                position:
 relative;

            }

            .box
 {

                width:
 100px;

                height:
 100px;

                background:
 gold;

                position:
 absolute;

                left:
 50%;

                top:
 50%;

                margin-left:
 -50px;

                margin-top:
 -50px;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <div class="box"></div>

        </div>

    </body>

</html>