极客时间对于推广渠道会有返利优惠，比如山月在极客时间买了一门课，再把课程分享给好友购买，这时极客时间会向山月返利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)

Author

回答者: shfshanyue (opens new window)

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

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

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

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

结合 justify-content/justify-items 和 align-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，欢迎交流

← 目录 css 如何实现左侧固定300px，右侧自适应的布局⭐️ →