在 CSS Grid 中将绝对定位的元素居中答案

【问题标题】：Centering absolutely positioned element in CSS Grid在 CSS Grid 中将绝对定位的元素居中
【发布时间】：2018-01-28 18:35:47
【问题描述】：

这支笔在 Mozilla 上有效。但是当我切换到 Chrome 时，它会中断。

是我自己还是浏览器出了什么问题？

.container {
  height: 500px;
  width: 500px;
  background-color: beige;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.container h2 {
  position: absolute;
  justify-self: center;
  align-self: center;
  grid-row: 1;
  grid-column: 1;
}

<div class="container">
  <h2>TEXT</h2>
</div>

codepen LINK

【问题讨论】：

标签： html css css-position css-grid

【解决方案1】：

Chrome 似乎在此问题上偏离了规范指南。

justify-self 和 align-self 属性应该作用于网格容器的绝对定位子元素。

9.2. With a Grid Container as Parent

一个绝对定位的网格容器的子元素是外流的，并且不是网格项目，因此不会影响其他项目的放置或网格的大小。

一个绝对定位子网格的静态位置容器被确定为好像它是网格中唯一的网格项边缘与网格的填充边缘重合的区域容器。

请注意，此位置受justify-self 的值影响和align-self 在孩子身上。

所以，Firefox 似乎有这个权利。

有关其他居中选项，请参阅此帖子：

Centering in CSS Grid

【讨论】：

【解决方案2】：

position: absolute 正在抛弃 Chrome（在 v62 上测试）。似乎 Firefox 将 justify-self 和 align-self 属性解释为覆盖，而 Chrome 没有，因此行为不同。

只需删除 position: absolute 即可。

https://codepen.io/anon/pen/vJRmNR

【讨论】：

所以它基本上是一个 chrome 错误？在这种情况下我需要保持绝对定位:(
@KonradAlbrecht 我不知道为什么，你告诉元素绝对定位，但你没有提供其他定位信息（如top 或left）。 justify-self 和 align-self 与position: absolute 做相同的事情，因此它们发生冲突。浏览器之间的区别在于它们如何处理冲突。也许您可以完全定位容器 div。