css上下垂直居中方法总结

时间：2021-11-20 19:32:41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

　　　　　/* 利用 flex 来进行布局，百度可以看看   */
        /*  方法一  align-items：垂直居中，justify-content:center 竖直居中 */
        /*.parent{  display: flex;align-items: center;text-align: center;justify-content:center;  }*/
        /*.son{display: inline-block}*/

        /*.parent{  display: flex;justify-content:center;}*/
        /*.son{display: inline-block;align-self: center;}*/



        /*  方法二  这种似乎子节点要宽高*/
        .parent{position: relative}
        .son{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto}




        /*  方法三  */
        /*.parent{display: table-cell;vertical-align: middle;text-align: center}*/
        /*.son{display: inline-block;}*/




        /*  方法四  */
        /*.parent{position: relative}*/
        /*.son{position: relative;top: 50%;left: 50%;*/
            /*-webkit-transform: translate(-50%,-50%);*/
            /*-moz-transform: translate(-50%,-50%);*/
            /*-ms-transform: translate(-50%,-50%);*/
            /*-o-transform: translate(-50%,-50%);*/
            /*transform: translate(-50%,-50%);}*/




        /*  方法五  */
        /*.parent{  text-align:center;  }*/
        /*.parent:after{  display:inline-block;  width:0;  height:100%;  vertical-align:middle;  content:'';  }*/
        /*.son{  display:inline-block;  vertical-align:middle;  }*/




    </style>
</head>
<body>
<div class="parent" style="width: 500px;height: 400px;border: 1px solid #ccc">
   <div class="son" style="height: 200px;width: 300px;border: 1px solid #ddd">宽高不固定,让 son 在 parent 垂直竖直居中。</div>
</div>
</body>
</html>

　　


　

一共基本的方法，根据不同的业务可以自己选择。


标签：

相关文章