H5C3--transform实现任何元素居中对齐

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

        .box{

            width: 440px;

            height: 500px;

            background-color: #ccc;

            overflow: hidden;

            position: relative;

        }

        .son{

            width: 200px;

            height: 100px;

            background-color: red;

            margin: auto;

            position: absolute;

            /*定位:参照的是父容器*/

            left: 50%;

            top: 50%;

            /*偏移:偏移中的百分比参照的是自身*/

            /*定位加变化是解决居中垂直对齐问题的神器、*/

            transform: translate(-50%,-50%);

         }

     </style>

 </head>

 <body>

 <div class="box">

    <div class="son"></div>

 </div>

 </body>

 </html>

巴特西

H5C3--transform实现任何元素居中对齐

最新文章

热门文章