[分享]css中宽高不定水平垂直居中

CSS中实现宽高不定元素的水平垂直居中是很常见的需求。下面是几种实现方式：

/* 第一种方式 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 第二种方式 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 第三种方式 */
.parent {
  display: grid;
}
.child {
  justify-self: center;
  align-self: center;
} 

第一种方式使用了绝对定位和transform属性，首先将父元素设置为相对定位，然后对于子元素设置绝对定位，并通过top和left属性将子元素放置在父元素的中心位置。接着使用transform属性平移子元素到其本身宽高的一半，从而实现水平垂直居中。

第二种方式使用flex布局，通过父元素设置display: flex，并设置justify-content和align-items属性为center将子元素水平垂直居中。这种方式不需要子元素设置任何属性。

第三种方式使用grid布局，通过父元素设置display: grid，然后对于子元素分别设置justify-self和align-self属性为center，从而实现水平垂直居中。这种方式也不需要子元素设置任何属性。