css水平垂直居中八种方法

最新推荐文章于 2024-01-29 10:00:00 发布

wwtx2048

最新推荐文章于 2024-01-29 10:00:00 发布

阅读量147

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45673305/article/details/128163120

版权

1.flex;
2.文字水平垂直居中;
3.position:absolute;margin:auto;
4.positionabsolute;transform: translate(-50%,-50%);
5.grid;
6.grid;
7.flex;
8.table-cell;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 500px;
            height: 500px;
            background: red;

        }

        .six {
            width: 100px;
            height: 100px;
            background: yellow;
        }

        /* 法一 flex*/
        /* .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .six {} */
        /* 法二 text-align  line-height  文字居中*/
        /* .wrapper {
            text-align: center;
          line-height: 500px;
        }

        .six {
           display: inline-block;
        } */
        /* 法三 position  */
        /* .wrapper {
         position: relative;
        }
        .six {
          position: absolute;
          top:0;
          left:0;
          right:0;
          bottom:0;
          margin:auto;
        } */
        /* 法四 position  */
        /* .wrapper {
         position: relative;
        }
        .six {
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
        } */
        /* 法五 grid  */
        /* .wrapper {
         display: grid;
         justify-content: center;
         align-items: center;
        }
        .six {
        
        } */
        /* 法六 grid  */
        /* .wrapper {
         display: grid;
        
        }
        .six {
        justify-self: center;
        align-self: center;
        } */
        /* 法七 flex  */
        /* .wrapper {
            display: flex;
            justify-content: center
        }

        .six {
            align-self: center;
            display: inline-block;

        } */
         /* 法八 table-cell  */
        /* .wrapper {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .six {
           display: inline-block;

        } */
    </style>
</head>

<body>
    <div class="wrapper">

        <div class="six item">Six</div>
    </div>
</body>

</html>