设置子div在父div垂直居显示已知或未知父div宽高的7种方法

如何设置子div在父div中垂直居中显示？

1. 使用flex布局（无需已知父子宽高）

.parent {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    display: flex;
    justify-content: center;      /*水平居中*/
    align-items: center;          /*垂直居中*/
}

.child {
    width: 200px;
    height: 200px;
    border: 2px solid pink;
}

2. 定位：父容器相对定位，子div绝对定位（无需已知父宽高，必须已知子div宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 2px solid pink;
  top: 50%;
  left: 50%;
  margin-top: -100px;   /*这里是子div高的一半*/
  margin-left: -100px;  /*这里是子div高的一半*/
}

3. 使用定位和margin: auto（水平居中）（无需已知父子宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  border: 2px solid pink;
  position: absolute;
  margin: auto;  /* 通过设置top，left四属性为0居中元素的做法，这就像四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;   
}

• 为什么margin: auto能实现水平居中，但不能按照同样的方式填充垂直方向上的剩余空间，实现垂直居中呢？
• 当左右的margin都设置为auto时，会平分剩余空间。因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

4. 使用margin: 150px auto,计算实现垂直居中的子div的上下margin（必须已知父子宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.child {
  width: 200px;
  height: 200px;
  border: 2px solid pink;
  margin: 150px auto;   /*计算实现垂直居中的上下margin=（父width-子width）/2*/
}

5. 计算能实现垂直居中的子div的margin-top和margin-left（必须已知父子宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.child {
  width: 200px;
  height: 200px;
  border: 2px solid pink;
  margin-top: 150px;   /*（父height-子height）/2*/
  margin-left: 150px;  /*（父width-子width）/2*/
}

6. 父div设置了display: table-cell（让标签元素以表格单元格的形式呈现,类似于td标签），和vertical-align: middle （无需已知父子div高宽）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: table-cell;     /*设置了display:cell后，vertical-align:middle使内部文字/行内元素内容垂直居中*/
  vertical-align: middle;  /* 使父元素内的行内元素的垂直居中 */
  text-align: center;      /* 使父元素内的行内元素的水平居中 */
}

.child {
  width: 200px;
  height: 200px;
  border: 2px solid pink;
  display: inline-block;
}

• vertical-align: middle;用于设置行内元素（自身）或表格单元格（table-cell）元素（内部子元素）的垂直对齐方式。

7. 父div设置text-align : center以及line-height=父height ，设置子div：vertical-align: middle，实现在父div中垂直居中对齐（必须已知父div宽高）

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  text-align: center;
  line-height: 500px
}

.child {
  width: 200px;
  height: 200px;
  border: 2px solid pink;
  display: inline-block;
  vertical-align: middle;  
}

• vertical-align: middle; （该属性只对行内和块级行内子元素生效）使子元素垂直对齐。
• 由于子元素的垂直对齐基线和父元素的绝对中线不一致，当父元素没有设置line-height时，该属性只能使行内元素的兄弟元素垂直对齐，无法子元素居中对齐父元素，若子元素对齐但不对于父元素垂直居中，需设置父元素lineheight=父height 。

这篇好文章是转载于：学新通技术网