绝对定位元素水平居中和垂直居中的原理

2019-07-17 17:56:35 阅读：202 来源： 互联网

标签：居中定位 right auto 元素 width margin left

通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时，通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现。下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理。

核心CSS代码：

position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;

绝对定位元素的布局由元素的三个因素决定：位置（top、bottom、left、right）、元素尺寸和margin。绝对定位元素在布局上呈现自适应的特点——位置和尺寸固定，则自适应margin值；位置和margin固定，则自适应尺寸。

（1）位置和尺寸固定,margin:auto;

  <div id='wrap'>
    <div id='item1'></div>
  </div>

 #wrap {
      width: 500px;
      height: 500px;
      border: 1px dotted black;
      margin: 0 auto;
      position: relative;  
    }

    #item1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      /* 核心代码 */
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
     
    }

布局效果：

计算样式：

水平方向：

width(wrap)=margin(item)+width(item)+padding(item)+left(item)+right(item)

由于位置设置为 top: 0;bottom: 0;left: 0;right: 0; ，尺寸固定为 width: 100px;

height: 100px;，margin:auto;自适应，实际水平方向margin值为500-100 =400px,平均分配左右两侧，即为margin-left:200px;margin-right:200px;。垂直方向同理可得。可以看到在绝对定位元素中，若水平方向位置left与right值相等，那么margin-left: auto;margin-right:auto;可以让其相对于定位的祖先元素水平居中。

（2）位置和margin固定

 <div id='wrap'>
    <div id='item1'></div>
  </div>

   #wrap {
      width: 500px;
      height: 500px;
      border: 1px dotted black;
      margin: 0 auto;
      position: relative;    
    }
    
    #item1 {
      background-color: purple;
      /* 核心代码 */
      position: absolute;
      margin: 20px;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
    }

布局效果

计算样式

在水平方向，由于right:0;left:0;并且margin-left:20px;margin-right:20px;各项相加和等于定位的祖先元素宽度，因此width的值为460px。

其他情况：
如果同时设置top、bottom、left、right，margin设置值中没有auto，那么位置top值优先于bottom值，left值优先于right值。

如果不设置位置，只设置margin:auto;那么布局中相当于margin:0;。

绝对定位元素和静态定位元素的相互作用：
如果绝对定位元素存在静态定位的兄弟元素，如果该元素没有设置垂直位置，那么其垂直位置将以静态定位的兄弟元素占位计算。

 <div id='wrap'>
    <div class='item2'>
    </div>
    <div id='item1'></div>
  </div>

 #wrap {
      width: 500px;
      height: 500px;
      border: 1px dotted black;
      margin: 0 auto;
      position: relative;
    }

    #item1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      /* 核心代码 */
      position: absolute;
      margin: auto;
     /*  top: 0px;
      bottom: 0; */
      left: 0;
      right: 0;

    }

    .item2 {
      width: 150px;
      height: 150px;
      background-color: green;
      position: static;
    }

标签：居中,定位,right,auto,元素,width,margin,left
来源： https://www.cnblogs.com/f6056/p/11202550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

绝对定位元素水平居中和垂直居中的原理