4.子绝父相的案例分析1.案例一子元素在父元素 - 子元素在任意宽度下可以在父元素中居中--不能固定写死值方法

1.案例一子元素在父元素 - 子元素在任意宽度下可以在父元素中居中--不能固定写死值方法1：让子元素往右边走一半板位置 --再往左边移动一半

<!-- html5 声明  必须要用 -->
<!DOCTYPE html>

<html lang="ch">
<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">
    <meta name="keywords" content="德龙科技,智能照明,施耐德knx,物联网4G">
    <meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
     
    <title>子绝父相</title>
    <style>
        *{
            margin: 0 0;
        }
        .father{
            position: relative;
            width: 400px; height: 400px;
            background-color: red;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
           transform: translate(-50% ,-50%);
            background-color: purple;
            width: 100px;height: 100px;
        }
      
    </style>
</head>
<body>
 <div class="father"> father
     <div class="son"> son</div>
 </div>
 
</body>
</html>