巧用网格布局令子元素超级居中

马黑黑 · 发表于 2022-7-20 07:39

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-7-20 07:43 编辑

超级居中是一个临时概念，同等于本文另一个指称，绝对居中。指两个层面：一是上下左右居中，二是父元素伸缩仍然动态保持居中。

网格布局（grid），较之弹性布局（flex）复杂，基本没有给大家介绍。grid布局理念比flex更进一步，但它足够抽象，属性繁多，初学者，乃至中级前端程序员，都不愿意去碰它。不过，正如我们常常使用 flex 的个别简易功能一样，我们也可以这样对待 grid，比如使用它的超级居中功能。

当使用了 display: grid，有一个简单的属性 place-items 能同时设定其下子元素的横向和纵向的对齐设置：

display: grid;
place-items: center;

这将使得此元素下的第一层子元素绝对居中，且动态改变元素大小时，子元素仍然保持绝对居中。

下面是一组完整的实例代码，父元素使用了网格布局，并设置了可以变大变小（拖曳右下角）：

<style>
#papa {
      margin: auto;
      resize: both;
      overflow: auto;
      width: 600px;
      height: 400px;
      box-shadow: 3px 3px 24px #000;
      display: grid;
      place-items: center;
      position: relative;
}
#son {
      position: absolute;
      width: 300px;
      height: 120px;
      box-shadow: inherit;
}
</style>

<div id="papa">
      <div id="son">Son</div>
</div>

简单解释：

CSS代码中，水鸭色部分是令元素可手动调整窗口尺寸，红色部分即为核心内容，网格布局、居中设置。

效果请看下楼。