元素水平垂直居中的几种常用方法

Posted 鱼樱、、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了元素水平垂直居中的几种常用方法相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素水平垂直居中</title>
        <style>
            /*方式一*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }
            /*方式二*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50px,-50px);
                /*或者transform: translate(-50%,-50%);*/
            }
            /*方式三  技巧*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin:auto;
            }
            /*方式四  弹性盒*/
            .father{
                display: flex;
                width: 400px;
                height: 400px;
                background: red;
                justify-content: center;
                align-items: center;
            }
            .son{
                width: 100px;
                height: 100px;
                background: aqua;
            }
        </style>
    </head>
    <body>
        <div class="box">我需要用多种方式居中你</div>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
</html>

 

以上是关于元素水平垂直居中的几种常用方法的主要内容,如果未能解决你的问题,请参考以下文章

CSS元素垂直居中的几种方法

垂直水平居中的几种方法

使元素相对于窗口或父元素水平垂直居中的几种方法

盘点水平垂直的几种方式

让DIV水平和垂直居中的几种方法

让DIV水平和垂直居中的几种方法