zoukankan html css js c++ java

居中子元素无固定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试模板</title>
    <style>
        *{
            margin: 0;
            padding: 0px;
        }
        /* 第一种
        .parent{
             400px;height: 200px;background: #797099;
            position: relative;
        }
        .child{
             200px;height: 100px;background: #eee;
            position: absolute;
            top: 0px;          
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin:auto;            
        } */
/* 
第二种
        .parent{
             400px;height: 200px;background: #797099;
            display:table-cell;
            vertical-align:middle;
            
        }
        .child{
             200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;
            margin: 0 auto;            
        } 

*/

    /* 第三种
    .parent{
             400px;height: 200px;background: #797099;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
            
        }
        .child{
             200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;
            display: inline-block;        
        } */
        /*
        第四种
        .parent{
             400px;height: 200px;background: #797099;
            display: flex;
            
        }
        .child{
             200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;
            margin:auto    
        } */

        /*
        第五种
        .parent{
             400px;height: 200px;background: #797099;
            display: flex;
            justify-content: center;           
            align-items: center;          
        }
        .child{
             200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;            
        }
        */
        .parent{
            width:400px;height: 200px;background: #797099;
            position: relative;
        }
        .child{    
            width: 300px; 
            height: 100px;           
            background: #eee;    
            border:2px solid #333;

            position: absolute;
            left: 50%;  
            top: 50%;    
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="parent" >
        <div class="child"></div>
    </div> 
</body>
</html>

查看全文

相关阅读:
JS中的逻辑或||逻辑与&&
for 循环里面事件函数的i值
 getByClass--js
ul 宽度不固定居中
 style.top style.left js
trigger() 触发事件
 JavaScript中hasOwnProperty函数
 使用windows powershell ISE管理命令窗口，并集成git命令
 nodeJs跨域设置(express,koa2,eggJs)
node获取本机动态IP,并对应修改相关JavaScript文件的IP地址

原文地址：https://www.cnblogs.com/jinsuo/p/13207846.html

居中 子元素无固定 宽高

居中子元素无固定宽高