css系列---【div水平垂直居中的几个方法】 

<!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>
</head>
<style>
    .partent{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        position: relative;

        /* 3-1.inline-block + text-align + table-cell + vertical-align（单元格方式） */
        /* text-align:center; 
        display:table-cell; 
        vertical-align:middle; */

        /* 4.flex + justify-content + align-items（弹性模型） */
        display: flex; 
        justify-content: center; /* 水平居中 */ 
        align-items:center; /*垂直居中*/
    }
    .cjild{
        width: 50px;
        height: 50px;
        border: 1px solid #ccc;
        /* 1.定位 + margin */
        /* position: absolute;
        left: 50%;
        top: 50%;
        margin:-25px 0 0 -25px */

        /* 2.定位 + margin */
        /* margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; */
        /* 3-2 .inline-block + text-align + table-cell + vertical-align（单元格方式） */
        /* display:inline-block;  */
    }
</style>
<body>
    <div class="partent">
        <div class="cjild"></div>
    </div>
</body>
</html>

 

posted on 2022-04-07 12:32  码农小小海  阅读(118)  评论(0)    收藏  举报

导航