极客时间返利平台，你可以在上边通过山月的链接购买课程，并添加我的微信 (shanyue94) 领取返现。

Apifox，在国内可替代 Postman 并强烈适用于团队的 API 管理工具。

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

更多描述

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

可打开 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

欢迎在 Gtihub Issue 中回答此问题: Issue 10 (opens new window)

Author

回答者: woohs (opens new window)

绝对定位方法：

.box {
  postion: absolute;
  top: 50%;
  bottom: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>

flex 方法：

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
  width: 50px;
  height: 50px;
}

<body>
<div class="box"><div>
</body>

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;
}

Author

回答者: SageSanyue (opens new window)

引自：https://css-tricks.com/centering-css-complete-guide/ 1 该元素的宽高固定吗？在将元素绝对定位为 top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负 margin 实现垂直水平居中。（跨浏览器支持很不错）

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

2 该元素宽高未知？（1）如果宽高未知，在将元素绝对定位为 top: 50%; left: 50%;后，可以使用 transform 属性来做负的 50%移动（基于当前元素宽高）。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并 margin: auto，不需要提前知道尺寸兼容性好。

.container {
  position: relative;
  height: 300px;
  border: 1px solid red;
}
.item {
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid green;
}

3 你要用 flexbox 吗？对 flexbox 进行垂直水平居中，只需设置两个属性为 center: align-items、justify-content。

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

4 你要用 grid 布局吗？父容器设置为 grid 布局后，子元素直接 margin: auto;即可实现垂直水平居中。

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

详细案例解释可参考：https://zhuanlan.zhihu.com/p/87134477

Author

回答者: lastSeries (opens new window)

你不知道的 flex 布局～

.box {
  display: flex;
}

.item {
  margin: auto;
}

Author

回答者: shfshanyue (opens new window)

你不知道的 flex 布局～
.box {
  display: flex;
}

.item {
  margin: auto;
}

这个方法眼前一亮，试了一下: 行内元素与块状元素均可，学习了！

Author

回答者: babycannotsay (opens new window)

你不知道的 flex 布局～
.box {
  display: flex;
}

.item {
  margin: auto;
}
这个方法眼前一亮，试了一下: 行内元素与块状元素均可，学习了！

https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/

← 17. 什么是 URL 编码 (URL Encode) 1. css 如何实现左侧固定300px，右侧自适应的布局 →