``` 以前采用百分比撑高 `padding`,那这种方案已经过时,会挤压 Content 内容,无法在其中填充内容(需要绝对定位)。 可使用最新的属性">
极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 子元素垂直居中,并且该正方形的长度/宽度为父容器宽度(width)一半的正方形

Issue

欢迎在 Issue 中交流与讨论: Issue 544 (opens new window)

垂直居中长度为父容器一半的子元素 - Codepen (opens new window)

<div class="container">
  <div class="item"></div>
</div>

以前采用百分比撑高 padding,那这种方案已经过时,会挤压 Content 内容,无法在其中填充内容(需要绝对定位)。

可使用最新的属性 aspect-ratio,即长宽比

.container {
  display: grid;
  place-items: center;
}

.item {
  width: 50%;
  aspect-ratio: 1/1;
}

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 7/25/2021, 7:03:19 AM