HTML 水平居中 垂直居中 垂直水平居中的几种实现方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31674679/article/details/81502033

水平居中

  1. 方法一:在父容器上定义固定宽度,margin值设成auto
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            background-color: blue;
            width: 200px;
            margin: auto;
        }
        .div2{
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊!!!!!!!!!
            </div>
        </div>
    </body>

</html>

这里写图片描述

方法2:在子元素中将display设置为inline-block,父元素text-algin设置为center

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            background-color: blue;
            text-align: center;
        }
        .div2{
            display: inline-block;
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊!!!!!!!!!
            </div>
        </div>
    </body>

</html>

这里写图片描述

垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;     
        }
        .div2{
            /*display: inline-block;*/
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊!!!!!!!!!
            </div>
        </div>
    </body>

</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            display: flex;
            justify-content:center;
            align-items:Center;
        }
        .div2{
            /*display: inline-block;*/
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊!!!!!!!!!
            </div>
        </div>
    </body>

</html>

垂直水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 500px;
                height: 400px;
                background: red;
                margin: 100px;
                //border: 2px;
            }
            .child{
                position: absolute;
                width: 200px;
                height: 150px;
                background: blue;
                margin: 125px 150px;
            }
        </style>
    </head>
    <body>

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

    </body>
</html>

这里写图片描述
在整个窗口中固定居中,定位+margin值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            .child{
                position: fixed;
                width: 200px;
                height: 150px;
                background: blue;
                top:50%;
                left: 50%;
                margin-top: -75px;
                margin-left:-100px ;

            }
        </style>
    </head>
    <body>
         <div class="child"></div>
    </body>
</html>

这里写图片描述

使用translate实现平移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            .child{
                position: fixed;
                width: 200px;
                height: 150px;
                background: blue;
                top:50%;
                left: 50%;
                transform: translate(-100px,-75px);
            }
        </style>
    </head>
    <body>
         <div class="child"></div>
    </body>
</html>

效果如上图。

技巧性方法,通过设置bottom top left right margin来实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            .father{
                width: 500px;
                height: 500px;
                background: black;
                position: relative;
            }
            .child{
                position: absolute;
                width: 200px;
                height: 150px;
                background: blue;
                top:0;
                left:0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child"></div>
        </div>

    </body>
</html>

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页