垂直水平居中方法总结

目录

 块元素垂直水平居中

文本垂直水平居中 

---

 块元素垂直水平居中

1. flex弹性布局：

父容器中加三个属性：

.list{
  display: flex;//1
  width: 200px;
  height: 500px;
  /* flex-direction: column; */
  border: 1px solid yellow;
  flex-wrap: wrap;
  justify-content: center;//2
  align-items: center;//3
}

     2.  position定位属性：

（1）使用绝对定位absolute + transform

(先给父元素设置宽高，和相对定位，然后子元素如下：）

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

（2）使用绝对定位 + margin 

（先给父元素设置宽高，和相对定位，子元素如下：）

这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top: -50%;不能达到垂直居中的效果

.work1 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
}

（3）使用绝对定位 + margin: auto 

（先给父元素设置宽高，和相对定位，子元素如下：）

父子元素宽高都未知时也适用

.work2 {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin:auto;
}

      3. 使用table-cell实现 

父元素设置宽高，然后display设置成table-cell,子元素display设置成行内块元素；

这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。

.par-work2 {
    height: 500px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.son-work2 {
    display: inline-block;
}

   4. 使用grid布局 

父元素display使用grid布局，并设置高度，子元素单元格内容align-self，justify-self设置垂直和水平居中 

这种方式适用于父元素高度确定的情况，有关gird布局的使用可以参考阮一峰老师的文章CSS Grid布局教程 

.par-work3 {
    display: grid;
    height: 500px;
}
.son-work3 {
    align-self: center; /*设置单元格内容的垂直位置*/
    justify-self: center; /*设置单元格内容的水平位置*/
}

文本垂直水平居中 

具体如下：

#app {
 width: 100px;
 height: 100px;
 background-color: pink;/* 添加背景颜色看的清楚些 */
 /* 设置文本行高等于父容器的高度 */
 line-height: 100px;
  /* 设置文本的排列方式为center:居中  注: align:排列  */
 text-align: center;
  }