如何设置子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;
}
  1. 定位:父容器相对定位,子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高的一半*/
}
  1. 使用定位和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不能实现垂直居中。
  1. 使用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*/
}
  1. 计算能实现垂直居中的子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*/
}
  1. 父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)元素(内部子元素)的垂直对齐方式。
  1. 父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 。

你可能感兴趣的:(css,css3,html)