Absolutely positioned elements centered horizontally and vertically centered principles

Absolute positioning ancestor normal level relative to its vertical center element positioned in the setting provided by the absolute positioning elements margin: auto; top: 0; bottom: 0; right: 0; left: 0; can be achieved. Following is a brief explore absolutely positioned elements so you can achieve the principles set centered horizontally and vertically centered.

Core CSS code:

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

　　

Layout absolutely positioned elements are determined by three factors elements: location (top, bottom, left, right), element size and margin. Adaptive absolute positioning elements presented in layout features - the position and size is fixed, the adaptive margin value; fixed position and the margin, the adaptive size.

(1) the position and size is fixed, 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;
     
    }

Layout effects:

Computing style:

 

 

 

horizontal direction:

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

Since the position of the set top: 0; bottom: 0; left: 0; right: 0;, size is fixed 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;
    }