极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 如何实现一个元素的水平垂直居中

更多描述

要求对行内元素、块状元素及不定宽高的块状元素均可适用:

可打开 codepen 进行调试: https://codepen.io/shanyue/pen/XWMdabg (opens new window),以下是布局代码

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>

<div class="container">
  <span class="item">行内元素</span>
</div>
.container {
   // 把代码写在这里
}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

Issue

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

提供一些现代浏览器下使用 flex/grid 的方法,不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。

使用 flex,以下是经典的垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 grid,它是做二维布局的,但是只有一个子元素时,一维布局与二维布局就一样了。

结合 justify-content/justify-itemsalign-content/align-items 就有四种方案

效果可以见 codepen (opens new window)

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}
.container {
  display: grid;
  justify-content: center;
  align-items: center;
}
.container {
  display: grid;
  justify-items: center;
  align-content: center;
}
.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

三个属性略显啰嗦,其实只需两个属性即可:

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

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/29/2021, 8:12:31 AM