实现子元素在父元素中水平垂直都居中笔记

实现子元素在父元素中水平垂直都居中

• 设置子元素绝对定位
• 设置子元素的left值和top值为50%
• 设置父元素相对定位
• 设置子元素margin-left：负自身宽度一半
• 设置子元素margin-top：负自身高度一半

<style>
   //消除默认样式
   *{margin: 0;padding: 0;}
   .father{
      width: 500px;
      height: 500px;
      background: pink;
      margin: 100px auto;
      position: relative;//设置父元素相对定位
    }
    .father .son{
         width: 200px;
         height: 100px;
         background: skyblue;
         position: absolute;//设置子元素绝对定位
         
         //设置子元素的left值和top值为50%
         left: 50%;
         top:50%;
         
         margin-left: -100px;//设置子元素margin-left：负自身宽度一半
         margin-top: -50px; //设置子元素margin-top：负自身高度一半
         }
</style>
<div class="father">
     <div class="son"></div>
</div>

详细版

欢迎访问我的个人博客