一个不定宽高的元素如何在父元素中垂直水平居中

1.position方法

• position+margin

.target {
   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}
复制代码

• position+transform

.target {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
复制代码

2.display方法

• table+vertical-align+text-align

.target {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
复制代码

3.flex布局

• align-items+justify-content

.target {
   display: flex;
   justify-content: center;
   align-items: center;
}
复制代码

4.grid布局

• place-content

.target {
   display: grid;
   place-content: center;
}
复制代码