极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (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

欢迎在 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>

提供一些现代浏览器下使用 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;
}

引自: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

你不知道的 flex 布局~

.box {
  display: flex;
}

.item {
  margin: auto;
}

你不知道的 flex 布局~

.box {
  display: flex;
}

.item {
  margin: auto;
}

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

你不知道的 flex 布局~

.box {
  display: flex;
}

.item {
  margin: auto;
}

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

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

Last Updated: 11/27/2021, 6:11:48 PM